Question

上的代码

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

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

<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，我们想要隐藏右图像的底部。

请指导。感谢。

Answer 1

1）

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

2）

战术的变化..背景有效但你的图像太大了。通过将其添加到div：

来让我们溢出

height: 200px; overflow: hidden;

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

注意我没有修正图像的高度/宽度。仅设置图像的宽度以保持高度/宽度比例自动。我只是设置div的高度并用溢出来切断它。

3）

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

有些css重构..所以不知道你是否喜欢它。如果您更喜欢解决方案3，请务必将信誉提供给Mohammad＆amp;不是我

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

Answer 2

您需要将图片的宽度设置为auto，将其高度设置为特定值。

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

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

将浮动图像显示为相同高度

2 个答案: