css - 具有固定高度 CSS 的响应式图像

Question

我想将图像放入具有固定高度的 div 中，并且图像应该扩展到 100% 而不会弄乱纵横比，并且还希望图像能够响应。我试过了，

img{
    height:500px;
    width:100%;
  }

这会弄乱纵横比。我该如何解决？

Answer 1

您可以使用 CSS object-fit :

img {
  width: 100%;
  height: 500px;
  object-fit: cover;
}

或包含取决于您的需要。