Old school D3 from simpler times

All examples By author By category About

coakenfold

Full window Github gist

Proportionally scale an image to container dimensions

<div class="set-1">
  <h1>100 x 100</h1>
  
  <div class="item-img">
    <div class="item-img__wrap">
      <img class="item-img__img" src="https://oakenfold.ca/images/bug/building-2051676_1920.jpg" alt="" />
    </div>
  </div>
  
  <div class="item-img">
    <div class="item-img__wrap">
      <img class="item-img__img" src="https://oakenfold.ca/images/bug/turtle-2052257_1280.jpg" alt="" />
    </div>
  </div>
</div>

<div class="set-2">
  <h1>200 x 600</h1>
  
  <div class="item-img">
    <div class="item-img__wrap">
      <img class="item-img__img" src="https://oakenfold.ca/images/bug/building-2051676_1920.jpg" alt="" />
    </div>
  </div>

<div class="item-img">
    <div class="item-img__wrap">
      <img class="item-img__img" src="https://oakenfold.ca/images/bug/turtle-2052257_1280.jpg" alt="" />
    </div>
  </div>
</div>

<div class="set-3">
  <h1>800 x 600</h1>
  
  <div class="item-img">
    <div class="item-img__wrap">
      <img class="item-img__img" src="https://oakenfold.ca/images/bug/building-2051676_1920.jpg" alt="" />
    </div>
  </div>
  
  <div class="item-img">
    <div class="item-img__wrap">
      <img class="item-img__img" src="https://oakenfold.ca/images/bug/turtle-2052257_1280.jpg" alt="" />
    </div>
  </div>
</div>

<div class="set-4">
  <h1>Fluid x 600</h1>
  
  <div class="item-img">
    <div class="item-img__wrap">
      <img class="item-img__img" src="https://oakenfold.ca/images/bug/building-2051676_1920.jpg" alt="" />
    </div>
  </div>
  
  <div class="item-img">
    <div class="item-img__wrap">
      <img class="item-img__img" src="https://oakenfold.ca/images/bug/turtle-2052257_1280.jpg" alt="" />
    </div>
  </div>
</div>