流体图像宽度，匹配高度

提问于 2024-04-29T22:27:42+08:00

浏览次

3

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

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

这适用于在所有主流浏览器上设置宽度，但我不知道如何匹配高度与宽度：/

2 回答

5
试着把 height:auto 扔进你的 class .
```
.img{
  max-width: 100%;
  width: 100%;
  min-width: 400px;
  height: auto; // <-- add me
}
```
正如评论中所提到的，大多数浏览器应该正确调整和缩放图像 . 但很高兴这可能有所帮助 .
回复于 2024-04-29T22:27:42+08:00
0
现在，使用CSS3有相对于视口（浏览器窗口）测量的新单位，如果你想要一个关于窗口的流畅图像，它在大多数用例中比“％”更好地工作 . 这些是vh和vw，分别测量视口高度和宽度 .
```
.img{
  max-width: 100vw;
  width: 100vw;
  min-width: 400px;
  height: auto;
}
```
回复于 2024-04-29T22:27:42+08:00

相关问题