问题所在
我正在尝试使用FlexSlider插件来创建一个整页滑块。几乎和苏西无帽website一模一样。我在获取幻灯片中的图像以将其拉伸到100%的高度时遇到了问题。
更新
所以我已经设法使用下面的代码解决了这个问题
我现在正在努力确保当浏览器调整大小时,图片在和两边都居中并被裁剪,而不是只在右边。有什么想法吗?
<div class="flexslider-container">
<div class="flexslider">
<ul class="slides">
<li><img src="images/kitchen_adventurer_donut.jpg" /></li>
<li><img src="images/kitchen_adventurer_caramel.jpg" /></li>
</ul>
</div>
.flexslider-container, .flexslider .slides, .flex-viewport {
height: 100%;
width: 100%;
}
.flexslider {
position: absolute;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.flexslider .slides > li {
width: 100%;
height: 100%;
display: none;
-webkit-backface-visibility: hidden; /* Hide the slides before the JS is loaded. Avoids image jumping */
}
.flexslider .slides img {
min-width: 100%;
min-height: 100%;
display: block;
}
发布于 2014-10-21 22:45:25
您可以尝试使用背景图像而不是图像,然后使用背景大小:封面。参见下面小提琴中的示例。
http://jsfiddle.net/67z3q6gL/3/
.flexslider .slides > li {
background-size: cover;
background-position: center;
height: 100%;
width: 100%;
display: none;
-webkit-backface-visibility: hidden;
}
https://stackoverflow.com/questions/26487698
复制相似问题