如何在保持宽高比的同时调整移动设备上的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;
        }
}

这将允许您指定图像的宽度，高度将自动调整自身与宽度成比例。