如何讓這個div的高度響應？

如何讓這個div的高度響應？如何讓這個div的高度響應？

<style> 
.full1 { 
    margin-bottom: 10px; 
    margin-top: 10px; 
    width: 100%; 
    height: 225px; 
} 
.left1, 
.middle1, 
.right1 { 
    float: left; 
    width: 33%; 
    height:100%; 
} 
</style> 

<body> 
    <div class="full1"> 
    <div class="left1" > 
     <img class="left-image" src="http://s16.postimg.org/nc57l3p8l/1_screen_shot_2014_08_24_at_12_43_26_pm_medium.jpg" /> 
    </div> 
    <div class="middle1"> 
     <img class="left-image" src="http://s16.postimg.org/wl7dv7y4l/windows_9_logo_01_medium.jpg" /> 
    </div> 
    <div class="right1"> 
     <img class="right1-image" src="http://s16.postimg.org/ig6675eh1/windows_9_logo_08_medium.jpg" /> 
    </div> 
    </div> 
</body>

這裏是小提琴：http://jsfiddle.net/k07gg3pv/。

圖像的寬度按照寬度調整，但高度在放大時會留下大的空白區域。

來源

2014-09-06 Dagger555

http://siebennull.com/equal_width_height。 html – Christina 2014-09-06 15:40:06

必須設置爲圖像的寬度/高度：

.full1 img { 
    width: 100%; 
    height: 100%; 
}

（這裏是你的提琴爲：http://jsfiddle.net/k07gg3pv/3/）

這將使圖像完全適合。但這不是一個好的解決方案，因爲你的圖像不會有它們應有的比例。所以你必須決定你是否要完全適應100％的寬度或恰好高度，你不會得到正確的圖像和兩者。

所以，你必須對圖像中設置一個值（寬度或高度）：

.full1 img { 
    width: 100%; 
}

（這裏是你對於提琴：http://jsfiddle.net/k07gg3pv/4/）

來源

2014-09-06 14:02:07 hffmr

沒有其他辦法？也許背景圖片？ – Dagger555 2014-09-06 14:15:44

如果您知道寬度總是大於高度，您可以將高度設置爲100％，創建父元素並使用「溢出」，以便將圖像切割到右側......但如果您想要他們完全適合，並將保持他們的比例，現在有辦法讓它工作，我很抱歉。 – hffmr 2014-09-06 14:21:01

不保持寬高比。 http://siebennull.com/equal_width_height.html – Christina 2014-09-06 15:40:24

如何讓這個div的高度響應？

回答

相關問題