Css 如何正确地使图像响应浏览器'；什么是调整？

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

我有一个400像素（400px）宽而高的图像，我希望在调整浏览器大小时，它只占视口宽度（90vw）的90%，因此我当前的代码如下：

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

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

但问题是，图像根本无法使用当前代码进行调整

当我将

max width

替换为

width

时，只会调整图像的宽度，而高度不会使我看到椭圆形和扭曲的图像

---

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

在CSS中设置

高度和
宽度，让
试试

或者为了更好的浏览器兼容性，您也可以使用背景图像来代替。
为此，您需要设置两个
@media
查询，一个用于水平，一个用于垂直调整，都设置为
400px
。对于水平方向，仅使用宽度，而对于垂直方向，仅使用高度：


body{margin:0}
img{
显示：块；/*删除底部边距/空白*/
}
@介质（最大宽度：400px）{
img{宽度：90%}
}
@介质（最大高度：400px）{
img{高度：90vh}
}
有人能告诉我为什么投票被否决吗？
img {
  width: 400px;
  height: 400px;
  object-fit: cover;
}

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