Html 以相同高度显示浮动图像

请检查以下地址的代码：

我们动态地显示两个相邻的浮动图像。我们正在将图像的宽度设置为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>

.img200{宽度：200px；}
.credit{位置：绝对；底部：8px；左侧：8px；
宽度：100%；颜色：#fff；字体大小：11px；}
场地1
站点2
这里是新线




场地1
站点2
这里是新线

是否可以隐藏其中一个图像的底部，使它们显示为相同的高度。在案例1中，我们希望隐藏左图像的底部，在案例2中，我们希望隐藏右图像的底部

请导游。谢谢。

1）

创建两个等高的div，并将图像设置为其背景

---

(二)

改变策略。。背景效果不错，但你的图像太大了。通过将以下内容添加到div，让其溢出：

height: 200px; overflow: hidden;

请注意，我没有固定图像的高度/宽度。只有图像的宽度设置为自动保持高度/宽度比例。我只是设置了div的高度，然后用溢流切断它

(三)

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

做了一些css重构…所以不知道你是否喜欢它。如果你更喜欢解决方案3，一定要把信誉交给穆罕默德&而不是我

---

您需要将两张图片的宽度设置为

auto

，并将其高度设置为特定值

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

---

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

Robert：我们无法设置css高度参数，因为高度需要是动态的。正如您在第二种情况中看到的，您的代码正在应用溢出：隐藏到两个图像，它们最终看起来都是方形的。然后将其设置为300px，使其看起来是矩形的：）比例将得到尊重（高度与宽度成比例动态变化）…只是底部在给定的测量值下被截断，但您必须选择一个大小。。你可以使用这个纯css解决方案，或者你将不得不求助于一些糟糕的计算来确定哪个更高，选择你想要的更短，然后应用js来重新调整所有这些。你不需要js来完成这个简单的任务。将“宽度”设置为“自动”，将“高度”设置为特定值，工作正常。所有解决方案均无效。您的解决方案改变了基本要求。我们需要这些图像的总宽度为400px，高度需要根据比例动态变化。如果既不（隐藏底部部分）也不（使其高度相同）做你想做的事，我想我们误解了你的问题一张图像是300px×469px，另一张是634px×664px..这看起来很奇怪。现在，宽度是固定的，高度是自动的，您的解决方案将正好相反。如果我帮助您，为什么不继续接受、提问和/或投票，谢谢您可以使用JavaScript：