とあるサイトで画像の縦サイズが小さいとレイアウト崩れを起こしていたので対応したときのメモ。
元ソースは公開できなのでだいぶ端折りましたがHTMLのイメージはこんな感じです。
<ul class="list">
<li class="photo"><img src="image/sample01.jpg" width="400" height="200" alt="サンプル01"></li>
<li class="photo"><img src="image/sample02.jpg" width="400" height="350" alt="サンプル02"></li>
<li class="photo"><img src="image/sample03.jpg" width="400" height="310" alt="サンプル03"></li>
<li class="photo"><img src="image/sample04.jpg" width="400" height="180" alt="サンプル04"></li>
</ul>
listクラスのなかにあるphotoクラスの高さを取得して、300pxに満たないものに対してhight:300pxを付与して高さを維持することで対応しました。eachで繰り返し処理しています。
$(function(){
$('.list .photo').each(function(index, element){
height=$(element).height();
if (height < 300) {
$(this).css('height', '300px');
}
})
});
300pxに満たないものに対してのみheight:300pxを付与することによってレイアウト崩れを回避することができました。
<ul class="list">
<li class="photo" style="height: 300px;"><img src="image/sample01.jpg" width="400" height="200" alt="サンプル01"></li>
<li class="photo"><img src="image/sample02.jpg" width="400" height="350" alt="サンプル02"></li>
<li class="photo"><img src="image/sample03.jpg" width="400" height="310" alt="サンプル03"></li>
<li class="photo" style="height: 300px;"><img src="image/sample04.jpg" width="400" height="180" alt="サンプル04"></li>
</ul>