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>