如何正确使图像响应浏览器的调整？

Question

我有一个简单的问题：如何使图像正确响应视口？

我有一个 400 像素 (400px) 宽和高的图像，我希望它在调整浏览器大小时仅成为视口宽度 (90vw) 的 90%，所以这是我当前的代码：

img {
width: 400px;
height: 400px;
}
@media screen and (max-width: 400px) {
img {
width: 90vw;
height: 90vh;
}
}

但问题是图像根本不会使用此当前代码进行调整。

当我用max-width代替width时，只有图像的宽度会调整，而高度不会给我留下椭圆形和扭曲的图像。

有没有简单的解决方法可以解决我的问题？

Answer 1

在 CSS 中为<img>设置height和width容易使其失真。如果您不希望发生这种情况，则只需指定一个维度并将另一个维度设置为auto。考虑到您的图像实际上是400px × 400px，这是您应该使用的：

#myImg {
width: 400px;
height: auto;
}
@media (max-width: 440px) {
#myImg { 
width: 90vw;
}
}
/* optional, for centering */
#myImg {      
display: block;
margin: 0 auto;
}

<img src="http://via.placeholder.com/400x400" id="myImg">

在这里玩它。注意 我使用了440px，因此在超过400px设备宽度限制时，不会从400px跳到360px。当然，如果这是您想要的，您可以使用400px。

Answer 2

尝试对象拟合。

img {
width: 400px;
height: 400px;
object-fit: cover;
}
@media screen and (max-width: 400px) {
img {
width: 90vw;
height: 90vh;
}
}

或者为了获得更好的浏览器兼容性，您也可以改用背景图像。

Answer 3

为此，您需要设置两个@media查询，一个用于水平，一个用于垂直调整，两者都设置为400px。对于水平的，您只使用width，而对于垂直的，只使用height：

body {margin: 0}
img {
display: block; /* removes bottom margin/whitespace */
}
@media (max-width: 400px) {
img {width: 90%}
}
@media (max-height: 400px) {
img {height: 90vh}
}

<img src="http://placehold.it/400x400" alt="">