全屏flexislider与响应图像

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (16)

问题

我正在尝试使用FlexSlider插件来创建整页滑块。几乎与Suzy Hoodless 网站完全相同。我在拍摄幻灯片中的图像时遇到问题需要将它们拉伸到100%的高度。

更新

所以我设法使用此代码解决问题

现在我想,以确保图像的中心和裁剪上BOTH两侧,而不是仅仅右侧当浏览器大小。有什么想法吗?

<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;
}   
提问于
用户回答回答于

您可以尝试使用背景图像而不是图像,然后使用background-size:cover。请参阅下面的小提琴中的示例。

http://jsfiddle.net/67z3q6gL/3/

.flexslider .slides > li {
    background-size: cover; 
    background-position: center;
    height: 100%;
    width: 100%;
    display: none; 
    -webkit-backface-visibility:   hidden;
}

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动