設置圖像高度的問題

所以我想知道是否有一種方法可以將圖像的高度設置爲其父容器高度的75％而不使用JavaScript？設置圖像高度的問題

任何想法？

2013-10-10 Drew

沒有，因爲這將涉及到一個動態計算，這不是HTML的目的，但正是JavaScript的目的。

2013-10-10 22:05:34

給容器中的絕對高度和肯定，height:75%將在img工作：

<div> 
    <img src="http://placehold.it/100x1"/> <!-- This is a 1px high image --> 
</div>

div { 
    height:100px; /* Absolute height on container. */ 
    width:100px; 
    background:#f00; /* I've used this to illustrate that the image fills 75%. */ 
} 

img { 
    width:100%; /* Force the width to 100% to prevent scaling. */ 
    height:75%; /* Height percentage declaration. */ 
}

JSFiddle demo。

來源

2013-10-10 22:08:10

如果容器沒有一個絕對的高度，從而將它的工作？另外，對於延遲的迴應感到抱歉 - 只是看到了你的消息！ – Drew

@Drew百分比按比例縮放。如果沒有絕對高度可用，則沒有任何可伸縮的東西。這適用於所有元素，而不僅僅是圖像。 –

Gotcha。所以在這種情況下，如果我將父容器的高度設置爲100％，是不是將它設置爲頁面高度的100％？ – Drew

相對單位必須有一個點被從那麼在這種情況下，父元素計算必須有一組高度

來源

2013-10-10 22:09:21

設置圖像高度的問題

回答

相關問題