幅と高さを指定したbxSliderのスライドで画像をド真ん中に表示する方法

方法: cssを書きます

下記の記述でbackground-size: contain;のような表示になります。

sample.html

<ul class="bxslider">
  <li>
    <img src="long_image.png">
  </li>
  <li>
    <img src="wide_image.png">
  </li>
</ul>

sample.js

$('.bxslider').bxSlider();

sample.css

ul.bxslider li {
  // 指定したい幅と高さ
  width: 200px;
  height: 200px;
  position: relative;
}
ul.bxslider li img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
}

参考