我把一個img
標籤的文檔中不知道相應的圖像的寬度/高度:顯示圖像
<img src="/myimage.png" />
我想用CSS來縮放圖像到其「原生」大小的一半(底層圖像的大小)。我無法弄清楚如何做到這一點。
- 使用
width: 50%
將相對於包含塊而不是圖像的大小。 - 我無法調整到特定的像素寬度,因爲我不知道圖像大小。
因爲我只需要支持WebKit的,我已經使用轉換嘗試:
-webkit-transform: scale(0.5);
這很好地調節圖像,但不調整圖像元素本身的大小。
- @Radagaisus建議使用Javascript,這是一個很好的後備。然而,這是在一個超輕量級的移動頁面上,所以我不能使用jQuery,並且手動處理所有onload()處理程序會很麻煩。
作爲後記:爲什麼我這樣做?因爲我需要處理Retina顯示屏。我可以使用devicePixelRatio
來檢測它,並填入較大的(2x)圖像,但我需要將它們縮小到50%,以便在顯示屏上看起來正確。
如果你同時使用'-webkit-變換:規模(0.5);'和'寬度:50%; '? –
@ZachRattner不,不幸的是,它的大小仍然是包含塊的一半。 –
你不能使用JS? – CamelCamelCamel