調整HTML圖像的縮放比例

Question

在Chrome和Firefox上，my site（右下角）上的卡片圖像顯示不同。在Chrome中，它的比例被保留，但比例在Firefox中扭曲。

如何申請圖像本身的不斷調整大小，跨瀏覽器（基本上做到現在情況如何針對Chrome）

Answer 1

理想情況下，您希望避免允許瀏覽器調整圖像大小。不同的瀏覽器可以達到不同的質量水平，這與您通過專用數字圖像編輯器（Photoshop，Paint.NET等）可以實現的效果無法比擬。最好在發佈之前將其調整到所需的尺寸，然後以像素爲單位顯式設置實際的高度和寬度。

Answer 2

你有你的圖片標籤以下內容：

width="100%" height="40%" 

嘗試只指定其中一個（我會建議寬度）以保持縱橫比，否則圖像將以某種方式拉伸或擠壓，以適應不那麼體貼的瀏覽器上的這些尺寸。