如何正确让图像响应浏览器的调整？答案

【问题标题】：How Do I Properly Make An Image Respond To A Browser's Adjustment?如何正确让图像响应浏览器的调整？
【发布时间】：2018-09-06 21:44:59
【问题描述】：

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

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

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

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

但问题在于，当前的代码根本没有调整图像。

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

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

【问题讨论】：

有人能告诉我为什么这被否决了吗？

标签： css mobile responsive-design media-queries responsive

【解决方案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;
}

&lt;img src="http://via.placeholder.com/400x400" id="myImg"&gt;

玩它here。注意我使用了440px，因此当跨越400px 设备宽度限制时，不会从400px 跳转到360px。当然，如果您愿意，可以使用400px。

【讨论】：

【解决方案2】：

试试object fit。

img {
  width: 400px;
  height: 400px;
  object-fit: cover;
}

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

或者为了更好的浏览器兼容性，您也可以使用背景图片。

【讨论】：

【解决方案3】：

为此，您需要设置两个@media 查询，一个用于水平，一个用于垂直调整，两者都设置到400px。 horizontal 一，你只使用width，而vertical 一，只使用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}
}

&lt;img src="http://placehold.it/400x400" alt=""&gt;

【讨论】：