如何调整移动设备上的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×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; 
     } 
} 

这将允许您指定图像的宽度和高度会自动调整自身成正比的宽度。