Показать плавающие изображения в той же высоте

Question

Пожалуйста, проверьте код на 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 мы хотели бы скрыть нижнюю часть правого изображения.

Просим руководствоваться. Благодарю.

Answer 1

1)

Создать 2 дивы одинаковой высоты и установить изображения в качестве фона

---

2)

Изменение тактики .. фон работ, но ваши изображения слишком велики. Позволяет переполнение вместо этого путем добавления к диве:

height: 200px; overflow: hidden; 

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

Обратите внимание, что я не фиксируя высоту/ширину изображения. Только ширина изображения задается так, чтобы поддерживать пропорции высоты/ширины автоматически. Я просто устанавливаю высоту div и отсекаю ее с переполнением.

3)

Решение от Магомета, кажется, хорошо для меня

ли некоторые CSS рефакторинга ..so не знаю, если вам это нравится. Если вы предпочитаете решение 3, не забудьте дать кредитки Мохаммада & не я

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

Answer 2

Вы должны установить ширину и изображения на auto, а их высота до определенного значения.

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

Таким образом, он будет держать пропорции обоих изображений, и она будет также сделать их меньше или больше, в зависимости от высоты. Убедитесь, что вы не добавляете слишком большую высоту, или изображения перейдут на следующую строку.