如何在保持宽高比的同时在移动设备上调整 CSS 图片

Question

我们的网站没有响应，其中一项要求是在移动设备上呈现图像以使其适合屏幕，我们运行遇到了问题，因为不同大小的图像被上传到网络第

页

这就是我们的 CSS 代码的样子

@media only screen and (min-width : 320px) and (max-width: 640px) {


            .article-body div img:not(.logoOP){
               width: 320px !important;
               height: 214px !important;
            }
}

所以这对于 600 X 400 的图像效果很好，因为宽高比是相同的。然而，当我们有不同尺寸的图像时，比如 400X578，上面的 CSS 代码将不起作用，图像看起来真的被拉伸和扭曲了。

这里有什么好的解决方案，因为我不是前端开发人员。

感谢任何帮助。

谢谢

Answer 1

将您的 CSS 修改为以下内容：

@media only screen and (min-width : 320px) and (max-width: 640px) {

        .article-body div img:not(.logoOP){
           width: 320px !important;
           height: auto;
        }
}

这将允许您指定图像的宽度，高度将自动根据宽度按比例调整。

如何在保持宽高比的同时在移动设备上调整 CSS 图片

how to adjust CSS image on mobile device while maintaining the aspect ratio

css

responsive-design