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

Question

我想将图像放入具有固定高度的 div 中，并且图像应扩展至 100%，而不会影响纵横比，并且还希望图像具有响应能力。我试过这个，

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

这会扰乱纵横比。我该如何解决这个问题？

Answer 1

你可以用 CSS 来做到这一点object-fit：

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

或者contain取决于您的需求。