<figure><img src="https://www.ibnet.ne.jp/column/web/201013/images/img_01.jpg"></img><figcaption>contain</figcaption></figure>
<figure><img src="https://www.ibnet.ne.jp/column/web/201013/images/img_01.jpg"></img><figcaption>cover</figcaption></figure>
<figure><img src="https://www.ibnet.ne.jp/column/web/201013/images/img_01.jpg"></img><figcaption>fill</figcaption></figure>
<figure><img src="https://www.ibnet.ne.jp/column/web/201013/images/img_01.jpg"></img><figcaption>none</figcaption></figure>
<figure><img src="https://www.ibnet.ne.jp/column/web/201013/images/img_01.jpg"></img><figcaption>scale-down</figcaption></figure>
figure{
  margin:0 0 20px;
  padding:0;
}
img{
  width:150px;
  height:150px;
  object-fit:contain;
}
figure:nth-child(2) img{
  object-fit:cover;
}
figure:nth-child(3) img{
  object-fit:fill;
}
figure:nth-child(4) img{
  object-fit:none;
}
figure:nth-child(5) img{
  object-fit:scale-down;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.