如何調整移動設備上的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; 
     } 
} 

這將允許您指定圖像的寬度和高度會自動調整自身成正比的寬度。