Имеются изображения разной высоты, но при изменении размера экрана нужно, чтобы высота блока, содержащего изображения была постоянной, т.е. чтобы при уменьшении размера изображения высота изображения также уменьшалась пропорционально.
И чтобы большее изображение принимало высоту меньшего изображения.
Сейчас при уменьшении размера экрана блоки с изображениями разной высоты.
Подскажите, как сделать адаптивные изображения, и чтобы высота блока была постоянной при масштабировании экрана. Желательно это сделать с помощью одного CSS.
.wrapper {
width: 90%;
position: relative;
}
ul {
text-align: center;
}
li {
width: 32%;
display: inline-block;
font-size: 0;
border: 1px solid gray;
vertical-align: top;
}
.img {
max-height: 220px;
display: inline-block;
overflow: hidden;
}
a {
display: inline-block;
}
img {
max-width: 100%;
height: auto;
}
<section class="news">
<div class="wrapper">
<ul>
<li>
<div class="img">
<a href="#"><img src="http://ru.fishki.net/picsw/052013/16/auto/ferrari/auto-003.jpg" alt=""></a>
</div>
<h3><a href="#">Title</a></h3>
</li>
<li>
<div class="img">
<a href="#"><img src="http://xn--45-6kc5ak0bf.xn--p1ai/wa-data/public/shop/products/86/68/6886/images/5672/5672.750.jpg" alt=""></a>
</div>
<h3><a href="#">Title</a></h3>
</li>
</ul>
</div>
</section>