如何在光滑的画廊中水平和垂直居中图像（+fancybox）

Question

我对 Slick Gallery 有很多问题。 我想居中 img - 图像有不同的大小，而且效果不好。

请看图片 - 这就是我需要的： sketch image

1. 图片较小时必须在中间
2. 当图像高度较大时，我们将其垂直居中
3. 当图像宽度较大时，我们将其水平居中

请看这段代码：

$(document).on('ready', function() {
    $(".slider").slick({
    dots: false,
    infinite: false,
    slidesToShow: 1,
    accessibility: true,
    autoplay: true,
    arrows: false,
    centerMode: true,
    centerPadding: '0px',
    slidesToShow: 1,
    });
});

.slider{
    width:440px;
    height:400px;
    background: gold;
}

<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/>
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>

<div class="slider">
  <a href="/" data-fancybox="images" ><img src="https://naturecanada.ca/wp-content/uploads/2016/08/boy-in-field.jpg" /></a>
  <a href="/" data-fancybox="images" ><img src="http://ca.france.fr/sites/default/files/imagecache/ATF_Image_bandeau_v2/la_france_cote_nature_6.jpg" /></a>
  <a href="/" data-fancybox="images" ><img src="http://media.istockphoto.com/photos/beautiful-nature-at-morning-in-misty-spring-forest-with-sun-picture-id506856658?k=6&m=506856658&s=612x612&w=0&h=GWvZGpApXiPXu2AtRX8YZe75-DkZIf6HVqHJuAKCTHk=" /></a>
  <a href="/" data-fancybox="images" ><img src="https://image.freepik.com/free-photo/nature-design-with-bokeh-effect_1048-1882.jpg" /></a>
  <a href="/" data-fancybox="images" ><img src="https://s-media-cache-ak0.pinimg.com/736x/a3/3f/86/a33f86fcd8edba60c037318f43346c6d.jpg" /></a>
  <a href="/" data-fancybox="images" ><img src="https://pbs.twimg.com/profile_images/687354253371772928/v9LlvG5N.jpg" /></a>
</div>

如何在 slick 画廊中居中图像？

Answer 1

div {
  height: 400px;
  background-color: red;
  text-align: center;
  white-space: nowrap;

}

.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

img {
  vertical-align: middle;
} 

<div>
<span class="helper"></span>
<a href="/" data-fancybox="images" >
  <img src="https://pbs.twimg.com/profile_images/687354253371772928/v9LlvG5N.jpg" />
  </a>
</div>

像这样调整你的CSS：

.slider{
  width:440px;
  height:400px;
  background: gold;
}
.slider img {
  max-width: 100%;
  max-height: 400px;
}
.slider {
  text-align: center;
}

Answer 2

在 css 中使用 div 和背景图像代替 img 来显示图像。使用background-size: contain 来产生这种效果。