css - 流体图像宽度，匹配高度

Question

我正在尝试(如果可能的话)使用 css 使图像的宽度达到流体 div 的 100%，但由于图像是正方形的(如果不是正方形，则会失真)我希望能够将高度与宽度匹配...对于我正在使用的流体宽度:

.img{
  max-width: 100%;
  width: 100%;
  min-width: 400px;
}

在所有主流浏览器上都可以很好地设置宽度，但我只是不知道如何将高度与宽度相匹配:/

Answer 1

尝试将 height:auto 放入您的类中。

.img{
  max-width: 100%;
  width: 100%;
  min-width: 400px;
  height: auto; // <-- add me
}

正如评论中提到的，大多数浏览器应该正确调整和缩放图像。但很高兴这能有所帮助。