<div class="d-flex">
  <div class="box">
    <figure class="mb-1">
    <img class="fill" src="https://unimap.wingzero.tw/unipic/f0de08292876b2ec94b3d35cd6e7f5fc.jpg" alt="">
      </figure>
    <h5 class="text-center m-0">fill</h5>
  </div>
  <div class="box">
    <figure class="mb-1">
    <img class="contain" src="https://unimap.wingzero.tw/unipic/f0de08292876b2ec94b3d35cd6e7f5fc.jpg" alt="">
      </figure>
    <h5 class="text-center m-0">contain</h5>
  </div>
  <div class="box">
    <figure class="mb-1">
    <img class="cover" src="https://unimap.wingzero.tw/unipic/f0de08292876b2ec94b3d35cd6e7f5fc.jpg" alt="">
      </figure>
    <h5 class="text-center m-0">cover</h5>
  </div>
  <div class="box">
    <figure class="mb-1">
    <img class="none" src="https://unimap.wingzero.tw/unipic/f0de08292876b2ec94b3d35cd6e7f5fc.jpg" alt="">
      </figure>
    <h5 class="text-center m-0">none</h5>
  </div>
  <div class="box">
    <figure class="mb-1">
    <img class="scale-down" src="https://unimap.wingzero.tw/unipic/f0de08292876b2ec94b3d35cd6e7f5fc.jpg" alt="">
      </figure>
    <h5 class="text-center m-0">scale-down</h5>
  </div>
</div>
.box{
  margin:10px;
}
.box figure{
  width:120px;
  height:120px;
  background:#000;
}
.box figure img{
  width:100%;
  height: 100%;
}
.fill{
  object-fit:fill;
}
.contain{
  object-fit:contain;
}
.cover{
  object-fit:cover;
}
.none{
  object-fit:none;
}
.scale-down{
  object-fit:scale-down;
}

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.