img高度「跳」與寬度：100％的網站負荷

我有一個簡單但棘手的問題。例如包裝寬度是500px。裏面有一個可變尺寸的圖片（比包裝更大）。img高度「跳」與寬度：100％的網站負荷

<div class="wrapper"> 
    <img src="image.jpg" width="1000" height="500" /> 
</div>

所以，如果我設置的CSS來此：現場負載（僅在第一次加載，因爲緩存）

.wrapper { 
    width: 500px; 
} 

.wrapper img { 
    width: 100%; 
    height: auto; 
}

圖像高度「跳躍」。有沒有辦法阻止「跳躍」而沒有設置明確的圖像高度？

這將是一個適合移動設備的網站，因此我在各種屏幕分辨率下使用@media更改包裝寬度，因此我無法明確設置圖像高度。

來源

2012-01-23 Philipp Kühn

理想情況下，您應該[指定圖片尺寸]（http://code.google.com/speed/page-speed/docs/rendering.html#SpecifyImageDimensions） –

Hi Philipp。我不知道你是否仍然有同樣的問題。我注意到今天發生在我身上，發現如果你的容器比你的實際圖像寬度/尺寸小，它會做這個「跳躍效果」。這就是我所做的：假設我的圖像適合1024x800的屏幕，我將CSS設置爲'width：100％'，然後以1000px的寬度保存圖像。問題解決了。我可以忍受24px的拉伸（它會按比例拉伸）。試試這個，歡呼吧。 –

所以在你的情況下，試試這個：保存你的圖像在490px寬，然後設置CSS類爲'.wrapper img'到'width：100％;'並移除高度屬性，同時保留你的'width：500px;'屬性爲'.wrapper'。這應該可以解決你的問題。 –

-2

刪除圖像上的高度屬性，並從CSS中刪除高度。

來源

2012-01-23 23:56:33

沒有。不工作。問題是：如果我有一個沒有寬度和高度屬性的圖像，圖像總是在站點負載上「跳躍」。如果圖像具有這些屬性，則不存在「跳躍」。在我的情況下，我搜索寬度的解決方案：100％.... –

只刪除我說的高度，如果你留下它的寬度將自行排序的一切。 –

沒有。那是行不通的。現場加載（沒有緩存中的圖像）圖像高度ist跳躍從0px到xxx px 50ms左右...這是任何瀏覽器！ –

-1

嘗試以百分比形式顯示圖像大小，而不是像素內嵌。

來源

2012-01-23 23:36:25 sanusart

是啊...看看我的CSS。寬度設置爲100％。但我無法將高度設置爲一切，因爲包裝的寬度是可變的。 –

我認爲這個http://jsfiddle.net/SafDk/ – sanusart

不......那是另一個效果。看看這裏：http://jsfiddle.net/2QVsM/13/並點擊多次按Ctrl + R（或在您的瀏覽器中的任何內容）重新加載緩存。你看到網站載入的邊界？ :) –

你可以用基於百分比填充底部的元素來包裝圖像。像這樣：

<div style="height: 0px; padding-bottom: X%">

其中X = Height/Width * 100。

來源

2016-10-17 08:38:19 Brendon

img高度「跳」與寬度：100％的網站負荷

回答

相關問題