我对 Slick Gallery 有很多问题。 我想将 img 居中 - 图像具有不同的尺寸并且光滑效果不佳。
请看图片 - 这就是我需要的: sketch image
- 图像较小时必须位于中间
- 当图像高度较大时,我们将其垂直居中
- 当图像宽度较大时,我们将其水平居中
请看一下这段代码:
$(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>
如何将图像放在光滑的图库中?
最佳答案
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;
}
关于javascript - 如何在光滑的画廊中水平和垂直居中图像(+fancybox),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44047122/