Jquery 全屏幕flexislider,图像响应灵敏 问题
我正在尝试使用FlexSlider插件创建一个完整的页面滑块。几乎和苏西无头巾的一模一样。我很难让幻灯片中的图像拉伸到100%的高度 更新 因此,我已经设法使用这段代码解决了这个问题 我现在试图确保在调整浏览器大小时,图像居中并在两侧进行裁剪,而不仅仅是在右侧。有什么想法吗?Jquery 全屏幕flexislider,图像响应灵敏 问题,jquery,html,css,Jquery,Html,Css,我正在尝试使用FlexSlider插件创建一个完整的页面滑块。几乎和苏西无头巾的一模一样。我很难让幻灯片中的图像拉伸到100%的高度 更新 因此,我已经设法使用这段代码解决了这个问题 我现在试图确保在调整浏览器大小时,图像居中并在两侧进行裁剪,而不仅仅是在右侧。有什么想法吗? 您可以尝试使用背景图像而不是图像,然后使用背景大小:封面。参见下面小提琴中的例子 张贴您尝试过的代码。代码附在上面!Jon:)奇怪的是,我的.flexslider类周围甚至没有其他容器。这是一个很大的不同。在不使用背景
您可以尝试使用背景图像而不是图像,然后使用背景大小:封面。参见下面小提琴中的例子
张贴您尝试过的代码。代码附在上面!Jon:)奇怪的是,我的.flexslider类周围甚至没有其他容器。这是一个很大的不同。在不使用背景图像的情况下管理工作环境。
<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;
}
.flexslider .slides > li {
background-size: cover;
background-position: center;
height: 100%;
width: 100%;
display: none;
-webkit-backface-visibility: hidden;
}