滑らかなギャラリー（+ fancybox）で水平と垂直のセンターイメージを表示する方法

Question

Slick Galleryには大きな問題があります。 私は中心に揃えたいと思っています。

写真を見てください - これは私が必要なものである： sketch image

1. 画像が小さい場合は、画像は、我々は垂直
に
2. ときの画像を、それを大きな高さを中心にしたとき
真ん中にある必要があります私たちは、水平

でそれを中心に大きな幅があり、このコードを見てください：

0123私は滑らかなギャラリーで画像を中央にするにはどうすればよい

$(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>

？

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

の代わりにimgを使用して、画像を表示するCSSの背景画像を使用します。その効果を得るにはbackground-size: containを使用してください。