画像の段落ちを防ぐcssの記述方法

HTML

<div id="contents">
<ul>
<li><a href="https://xxx.jp/"><img src="https://xxx.jp/img.jpg" /></a></li>
<li><a href="https://xxx.jp/"><img src="https://xxx.jp/img.jpg" /></a></li>
<li><a href="https://xxx.jp/"><img src="https://xxx.jp/img.jpg" /></a></li>
<li><a href="https://xxx.jp/"><img src="https://xxx.jp/img.jpg" /></a></li>
<li><a href="https://xxx.jp/"><img src="https://xxx.jp/img.jpg" /></a></li>
</ul>
</div>

css

#contents li{
float:left;
width:50%;
}

#contents li img{
max-width:100%;
}

こういう横並びのタグ組みの場合、画像の縦横比が異なると、段落ちします。段落ちを防ぐには、以下のような記述をCSSに追加してあげればOKです。

css

#contents li a{
position:relative;
display:block;
overflow: hidden;
}

#contents li a::before{
content: "";
display: block;
padding-top:120%;
}

#contents li a img{
position:absolute;
left:0;
top:0;
}