【jQuery】bxsliderで画像を縦横中央に表示する方法

こんにちは、Ryohei（@ityryohei）です！

bxsliderをデフォルトの状態で設置すると、画像はすべて左上を基準に配置され、スライドに表示されます。画像サイズをすべて親要素のサイズに合わせて編集し、アップロードするのであればデフォルトの状態でも問題ないのですが、CMSから投稿したり、お客様側で画像を追加される場合はサイズがまちまちになって左上にちょこんと表示されてしまいますよね……。

そこで、今回はどのサイズの画像であってもbxsliderで中央に表示する方法をご紹介したいと思います！

bxsliderの使い方については以下の記事をご参照いただければ幸いです！

bxslider

共通のHTMLとJS

本記事では以下のHTMLタグを使って解説しています。スライダーはリストにしています。

HTML

<ul class="slider">
  <li><img src="//into-the-program.com/demo/images/sample001.jpg"></li>
  <li><img src="//into-the-program.com/demo/images/sample002.jpg"></li>
  <li><img src="//into-the-program.com/demo/images/sample003.jpg"></li>
  <li><img src="//into-the-program.com/demo/images/sample004.jpg"></li>
  <li><img src="//into-the-program.com/demo/images/sample005.jpg"></li>
</ul>

JS

$(document).ready(function(){
  $('.slider').bxSlider();
});

横中央揃えにする

横方向に中央表示にする場合、imgタグに少しだけスタイルを追加してあげます。

以下、デモになります。画像が横方向に対して中央に表示されるようになります。

Demo

CSS

.slider img {
  display: block;
  margin: 0 auto;
}

縦中央揃えにする

画像の親要素であるliタグのpositionをrelativeにして相対位置とし、表示する画像の絶対位置を指定します。縦方向で中央表示する場合は親要素に高さを指定してあげる必要があります。本記事ではliタグに高さを指定しています。

以下デモです！横方向は左に寄っていますが、縦方向は中央に表示されるようになります。

Demo

CSS

.slider li {
  position: relative;
  height: 800px;
}
.slider img {
  position: absolute;
  top: 0;
  bottom: 0;
  display: block;
  margin: auto 0;
}

縦横中央揃えにする

最後に、縦横方向に対して中央表示にする方法です。上記の縦方向の中央表示に横位置の指定を付加しています。

Demo

CSS

.slider li {
  position: relative;
  height: 800px;
}
.slider img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  margin: auto;
}

以上、bxsliderで異なるサイズの画像を中央に表示する方法のご紹介でした！最後まで読んでいただきありがとうございました！