流体图像宽度，匹配高度

Question

我正在尝试（如果可能的话）使用css使图像100％的流体div的宽度，但因为图像是正方形（如果不是正方形将扭曲）我希望能够将高度与宽度相匹配...我正在使用的流体宽度：

.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
}

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

Answer 2

现在，CSS3有相对于视口（浏览器窗口）测量的新单位，如果你想要一个关于窗口的流畅图像，这在大多数用例中比＃34;％＆更好用＃34 ;.这些是vh和vw，分别测量视口高度和宽度。

.img{
  max-width: 100vw;
  width: 100vw;
  min-width: 400px;
  height: auto;
}