如何让这个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的高度响应？

回答

相关问题