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

我希望我的img有高度：18em，但当网站在移动视图中加载时，我希望img尽可能高，但不超过宽度：100%

img的CSS代码是什么

我目前的代码是：

.img{
高度：18em；
最大宽度：100%；
}

首先使用媒体屏幕检查手机大小，您可以将手机版本的CSS设置到媒体屏幕区域

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

---

将

height

替换为

max height

是否有效

---

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

您可以在移动视图中使用

height:auto

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

---

这个做得很好！谢谢你的快速回答！