更好的方法來自動調整圖像的縱橫比？

Question

我正在使用此代碼在移動頁面上自動將圖像調整為窗口大小：

img {
  width:100%;
  max-height : auto;
  max-width : 480px;
}

我的目的是在小屏幕上以適當大小的窗口顯示圖像，在更大的屏幕上顯示最大480px，保持比例。

但由於某些原因，我不知道我什么時候使用該代碼，圖像周圍的文字落后於它。

有一種方法可以使用Java或Jquery等其他方法來實現這個結果並避免這個問題嗎？

Answer 1

如果你為移動設備執行此操作，我會建議服務器調整大小以節省下載大小。

關於落后的文本，您是否有更全面的測試用例顯示此CSS適用的實際文檔？

Answer 2

如果你這樣做，你最終會得到壓扁的圖像。 我認為這會給你用CSS實現最好的結果：

#content img {
    width: 100%;
    height: auto;
    max-width: 480px;
}

Answer 3

我在我的頁面中添加了此代碼並且它正在工作：

img {
  width:100%;
  max-height : auto;
  max-width : 480px;
}

Answer 4

您是否嘗試過針對不同屏幕尺寸使用不同的樣式表？ 然后，您只需要為每種情況編寫代碼，然后加載所需的樣式。 如果您有其他需要根據尺寸更改的樣式，它也會派上用場。 在移動網站上非常有幫助。

<meta content="width=device-width, initial-scale=1.0" name="viewport">

有助於確保它正確縮放。 不確定它會有多大幫助，但希望這個鏈接有所幫助。

特定樣式表的CSS技巧

我也玩過一點，如果你把圖像設置為百分比，它似乎也有效。 我將文本左側的一個浮動，屏幕的50％，並重新調整文本大小。 如果您需要我發布示例，請詢問。

Answer 5

使用@media按手機，平板電腦或桌面尺寸進行手動更改。 順便說一句，手機和平板電腦將擁有風景和肖像。 如果您使用谷歌瀏覽器檢查，您可以更好地確定它。 網站樣本： 媒體查詢：如何定位桌面，平板電腦和手機？