[CSS] Control Image Aspect Ratio Using CSS

標籤：back   aspect   tomato   blog   ack   demo   fit   box   image   

Resize images and videos to fill their parent and maintain their aspect ratio with pure CSS. The new object-fit and object-position properties allow you to scale images and videos, much like you could with background-size and background-position.

 

img {  width: 90vw;  height: 75vh;  border: 3px solid tomato;}.img-con1 img{    object-fit: fill;}.img-con2 img{  object-fit: contain;}.img-con3 img{        object-fit: cover;}.img-con4 img{  object-fit: none;}.img-con5 img{  object-fit: scale-down;}.img-con6 img{  object-fit: fill;  object-position: 20px 5px;}/* Demo styles only */* {  box-sizing: border-box;}body {  margin: 0;}

 

[CSS] Control Image Aspect Ratio Using CSS