html - 即使宽度为 100% 且高度为自动，也无法在移动设备中响应图像

Question

我已经在网上查找了几个小时关于如何使图像在移动设备上响应的问题。这就是它在计算机上的样子：

当我尝试“检查元素”并查看图像时，结果如下：

如图所示，图像被压扁（？），其中宽度正在减小。

我正在使用媒体查询来自定义宽度和高度。

HTML：

<div id = "projects">
        <div id = "we-cycle">
            <img id = "we-cycle-image" src = "./photos/we-cycle.png" width = "100%" height = "auto">
        </div>

CSS：

#projects {
    width: 80%;
    margin: 300px auto;
    margin-left: -30px;
    padding: 20px;
}

#we-cycle-image {
    position: relative;
    max-width: 80%;
    height: auto;
}

@media screen and (max-width: 500px) {
  #we-cycle-image {
    width: 100%;
    height: auto;
  }
}

标签： htmlcssimageresponsive

Answer 1

是的，所以图像被压扁了，因为它们的纵横比是 1:1 或正方形，但是在小屏幕上没有足够的空间让它们呈正方形，所以浏览器正在将纵横比更改为适合的东西，即使它不看起来不太好快速修复：假设您已经在 div 中拥有显示 flex 的图像，请添加以下样式： flex-wrap: wrap;