-2

请查看http://jsfiddle.net/jfzZQ/上的代码

我们正在动态地显示两个浮动图像。我们将图像的宽度设置为 200 像素，而不是设置高度参数。

由于图像的比例不同，一幅图像的高度比另一幅长。

<style>
 .img200 {width:200px;}
 .credit {position: absolute; bottom: 8px; left: 8px; 
 width: 100%; color: #fff;font-size: 11px;}
</style>
<div style="width:405px;">
<div style="position: relative; float:left;">
    <img class="img200" src="http://images.theage.com.au/2012/12/19/3902461/art-353-        svMESSI-300x0.jpg" /> <span class="credit">site 1</span>

</div>
<div style="position: relative; float:right;">
    <img class="img200" src="http://i.dailymail.co.uk/i/pix/2012/12/04/article-2242647-11D1474C000005DC-964_634x664.jpg" /> <span class="credit">site 2</span>

</div>
</div>
<div style="clear:both;">new line here</div>
<br />
<br />
<div style="width:405px;">
 <div style="position: relative; float:left;">
    <img class="img200" src="http://nimg.sulekha.com/sports/original700/lionel-messi-2009-12-21-15-41-46.jpg" /> <span class="credit">site 1</span>

</div>
<div style="position: relative; float:right;">
    <img class="img200" src="http://media.npr.org/assets/img/2013/06/12/messi122way_custom-74f98cf7a4148d6405ad71c75457f7a4f516a9c9-s6-c30.jpg" /> <span class="credit">site 2</span>

</div>
</div>
<div style="clear:both;">new line here</div>

是否可以隐藏其中一张图像的底部，以便它们都显示为相同的高度。在情况 1 中，我们想隐藏左图的底部，在情况 2 中，我们想隐藏右图的底部。

请指导。谢谢。

4

2 回答 2

2

1)

创建 2 个相等高度的 div 并将图像设置为背景

2)

改变战术..背景工作，但你的图片太大了。让我们通过将其添加到 div 来代替溢出：

height: 200px; overflow: hidden;

http://jsfiddle.net/jfzZQ/1/

请注意，我没有固定图像的高度/宽度。只有图像的宽度设置为自动保持高度/宽度比例。我只是设置 div 的高度并用溢出将其切断。

3)

穆罕默德的解决方案对我来说似乎很好

做了一些css重构..所以不知道你是否喜欢它。如果您更喜欢解决方案 3，请务必将信任交给 Mohammad 而不是我

http://jsfiddle.net/jfzZQ/5/

于 2013-07-09T20:21:50.327 回答
1

您需要将两个图片的宽度设置为auto，并将它们的高度设置为特定值。

img {
   width:auto;
   height: /* make height same for both*/
}

这样，它将保持两个图像的比例，并且还会根据高度使它们变小或变大。不过，请确保不要添加太多高度，否则图像将转到下一行。

于 2013-07-09T20:49:06.167 回答