设置图像高度，但按宽度限制图像大小答案

【问题标题】：Setting image height, but limit image size by width设置图像高度，但按宽度限制图像大小
【发布时间】：2017-07-17 18:33:15
【问题描述】：

我希望我的 img 有 height:18em，但是当网站在移动视图中加载时，我希望 img 尽可能高，但 img 不会超过 width:100%。

img 的 CSS 代码是什么？

我当前的代码是：

.img{
  height: 18em;
  max-width: 100%;
}

但是当在移动视图中加载时，图像的高度和宽度彼此不成比例。高度保持在 18em，宽度收缩到 100%。我希望图像缩放具有 100% 的宽度。

我知道这是一个简单的问题，但我无法让它发挥作用。我使用比例为 16:9 和 1:1 的图像，所以我总是遇到问题...... 有人可以帮我吗？

【问题讨论】：

【解决方案1】：

您可以在移动视图中使用height:auto

@media screen and (min-width: 480px) {
    .img {
       height: auto;
       max-width: 100%;
     }
}

【讨论】：

【解决方案2】：

先使用Media Screen查看手机尺寸，然后可以将手机版的CSS设置到media screen区域

@media screen and (min-width: 480px) {
    .img{
       height: 9em;
       max-width: 100%;
     }
}

【讨论】：

【解决方案3】：

用max-height 替换height 是否有效？

如果没有，您可能应该使用一些媒体查询来增强移动视图和桌面视图的用户体验。

【讨论】：