[CSS] Control Image Aspect Ratio Using CSS

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:;

}

巴特西

[CSS] Control Image Aspect Ratio Using CSS

最新文章

热门文章