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

Question

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

我有一个400像素（400像素）宽和高的图像，我希望它在浏览器调整大小时只变为视口宽度（90vw）的90％，所以这是我当前的代码：

img {
  width: 400px;
  height: 400px;
}

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

但问题是图像根本没有使用当前代码进行调整。

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

我的问题有一个简单的解决方法吗？

Answer 1

在CSS中为height设置width和<img>很容易扭曲它。如果您不希望这种情况发生，您应该只指定一个维度并将另一个维度设置为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">

和它一起玩here。注意我使用440px所以当越过400px设备宽度限制时，不会有从360px到400px的跳跃。当然，如果这是你想要的，你可以使用400px。

Answer 2

试试object fit。

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="">