在圖片標簽來源上設置高度

Question

加載包含圖片標簽的頁面時，由於瀏覽器不知道圖像的高度，因此文本在加載圖像時會跳來跳去。 如何為每個來源指定圖像高度？

Answer 1

有3種不同的方法可以實現這一目標

• 使用HTML img height屬性。 手動檢查圖像高度並進行設置。 （不建議）

• 在每個斷點上使用CSS min-height屬性（好一點）

• 使用javascript預加載圖像 ，然后顯示一個動畫加載程序，該加載程序將向下滑動並填充圖像高度，直到其淡入。（需要更多的工作，但絕對是實現純凈渲染的最佳解決方案）。

Answer 2

這是由您的<img>標記引起的，您未指定他的身高

請改用<img height="x" width="y" src="myimage"> 。 這樣，當未加載圖像時，空白容器將從開始就適合最終尺寸

Answer 3

一種方法是使用jQuery庫以編程方式獲取所有標簽<img />並設置屬性“ height”和“ width”。