Wie horizontale und vertikale Bilder in der Mitte in Slick Galerie (+ fancybox)

Question

Ich habe viel Problem mit Slick Gallery. Ich möchte img zentrieren - Bilder haben unterschiedliche Größen und Slick funktioniert nicht gut.

die Bilder ansehen Bitte - das ist das, was ich brauche: sketch image

1. wenn Bild klein ist auf Mitte
2. sein muss, wenn die Bild große Höhe haben wir es in vertikaler
3. zentriert, wenn die Bild haben große Breite zentriert wir es in horizontaler

betrachten sie bitte diesen Code:

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

Wie kann ich Zentrieren Bilder in slick Galerie?

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>

Passen Sie Ihre CSS wie folgt aus:

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

Answer 2

anstelle von IMG verwenden div und Hintergrundbild in CSS, um Bild anzuzeigen. Verwenden Sie background-size: contain, um diesen Effekt zu erzielen.