要素の数が変化しても指定した横幅に画像を統一する方法
今回は、スマホなど端末のブラウザサイズが固定ではないときに便利な要素の数が変化しても指定した横幅に画像を統一する方法をご紹介したいと思います。
ある要素のサイズを取得して別の要素に直接スタイルで記述するのは、こちらの記事と同じです。
この方法がすぐ思いつくようになると、可変する端末をマークアップしていく時に本当に便利です😊
今回の要件はこちら
・横幅は端末によって変化する
・最大４点（仮）の画像を横一列に配置
・画像が４点以下でも４点の時の横幅で中央配置
・最大４点（仮）の画像を横一列に配置
・画像が４点以下でも４点の時の横幅で中央配置
動的なサイトなどの場合、条件によって表示したい画像点数が変わったりすることがあるので、そういった時に便利だと思います。
デモサイトはこちら
HTML
画像の点数の違う、それぞれの一覧を並べて比べてみます。
画像の点数が最大４点の時の画像サイズをベースにしました。
ブラウザサイズが変わった時に、画像が３点や２点でも画像点数４点の時と同じサイズになっているか更新して確認してみてください！
<div class="main">
<ul class="list">
<li class="item">
<img src="img/img_400_400.jpg" width="400" height="400">
</li>
<li class="item">
<img src="img/img_400_400.jpg" width="400" height="400">
</li>
<li class="item">
<img src="img/img_400_400.jpg" width="400" height="400">
</li>
<li class="item">
<img src="img/img_400_400.jpg" width="400" height="400">
</li>
</ul>
<ul class="list">
<li class="item">
<img src="img/img_400_400.jpg" width="400" height="400">
</li>
<li class="item">
<img src="img/img_400_400.jpg" width="400" height="400">
</li>
<li class="item">
<img src="img/img_400_400.jpg" width="400" height="400">
</li>
</ul>
<ul class="list">
<li class="item">
<img src="img/img_400_400.jpg" width="400" height="400">
</li>
<li class="item">
<img src="img/img_400_400.jpg" width="400" height="400">
</li>
</ul>
<ul class="list">
<li class="item">
<img src="img/img_400_400.jpg" width="400" height="400">
</li>
</ul>
</div>
CSS
css側ではdisplay: flex;を使用して横並びにしました。
画像の点数が４点以下になったときに、中央揃えになるようにjustify-content: center;の記述を忘れないようにしてください😊
.list{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
margin-bottom: 20px;
}
.item{
width: calc(100% - 40px / 4);
padding: 5px;
list-style: none;
box-sizing: border-box;
}
.item img{
width: 100%;
height: auto;
vertical-align: bottom;
}
jQuery
画面を更新した時に、その画面サイズのlistの幅を取得します。
そのサイズを4分間したサイズをitemに直接スタイルで記述します。
これで、画面サイズが固定でない状態で画像点数が変化しても、画像サイズが一定になりましたね！
// 画像点数が変化しても横幅を統一する
$(window).on('load resize', function(){
$('.item').css('width', ($('.list').width() / 4) + 'px');
});
おすすめのjQuery参考書はこちら！
posted with ヨメレバ
西畑一馬 アスキー・メディアワークス 2013年03月
