如何使用鈣來保持圖像的比例（寬度 - X）

Question

我知道，只指定寬度或百分比的高度將使圖像保持相應的比例，然而，似乎如果我嘗試類似：

img {width: calc(100% - 60px);} 

我失去了比例。圖像將變爲60px更窄。然後我試了這個：

img {width: calc(100% - 60px); height: calc(100% - 60px);} 

..但圖像仍然不會保留其正確的比例。

有沒有人知道用CSS，或可能一些輕js，使用計算單位，同時保留正確的比例？

最終目標是讓所有圖像都包含在一個很大的（包含每個頁面上的大部分內容）div的CSS中，以減少圖像大小以適應移動設備（特別是iphone縱向），而不會溢出並導致橫向滾動或其他具有100％寬度的元素（爲了跨越頁面，例如橫幅）而達不到整個頁面寬度。

我想使用特定於設備寬度的媒體查詢，以便在合計所有圖像的最大px寬度之後給出所有圖像的總頁邊空白％填充值，但我寧願使用calc值，否則，我很惱火，我無法使用它們。

Answer 1

如果您只想爲圖像設置一個尺寸，請將其他尺寸設置爲auto。瀏覽器將處理比例。下面應該爲你工作：

img { 
    width: calc(100% - 60px); 
    height: auto; 
}