固定高度的flexslider，同时保持图像的纵横比并隐藏溢出
固定高度的flexslider，同时保持图像的纵横比并隐藏溢出
提问于 2016-04-29 09:47:48
已经找了好几个小时了。我想为一种横幅旋转器在页面上的挠性滑块。我设法为图像设置了一个固定的高度。但是图像的宽度会左右伸展到浏览器的边框。我相信我想要的是一些“溢出:隐藏”。If browser_width > img_width:从图像的左侧和右侧显示背景。If browser_width < img_width:从左侧和右侧的图像中剪切零件。所有方法都保持纵横比。
目前，图像被水平拉伸/缩小。
HTML
<div class="flexslider">
<ul class="slides">
<li>
<div class="flexslider_image">
<img src="/images/alnwick-castle-92607.png" />
</div>
</li>
<li>
<div class="flexslider_image">
<img src="/images/server-90389.png" />
</div>
</li>
</ul>
</div>
CSS
.slider_container {
margin-top: -120px;
}
.flexslider {
border: none !important;
box-shadow: none;
margin:0px;
padding: 0px;
}
.slides li {
background-position: center;
-webkit-backface-visibility: hidden;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.flexslider_image {
}
.flexslider_image img {
height: 500px;
}Stack Overflow用户
发布于 2016-04-29 22:46:34
经过几个多小时的寻找，我找到了一个解决方案。
不要为图像使用img-tag。取而代之的是使用带有背景图像的div。有关详细信息，请参阅my html和css。
我锁定的另一个好处是，现在可以更容易地在幻灯片上放置内容。
HTML
<div class="flexslider">
<ul class="slides">
<li>
<div class="flexslider_background" style="background: url('/images/server-90389.png') no-repeat center;">
<div class="flexslider_content">
<p>
Hallo Test 2
</p>
</div>
</div>
</li>
<li>
<div class="flexslider_background" style="background: url('/images/minecraft-938604.png') no-repeat center;">
<div class="flexslider_content">
<p>
Hallo Test 3
</p>
</div>
</div>
</li>
<li>
<div class="flexslider_background" style="background: url('/images/minecraft-669310.jpg') no-repeat center;">
<div class="flexslider_content">
<p>
Hallo Test 4
</p>
</div>
</div>
</li>
</ul>
</div>CSS
.slider_container {
margin-top: -120px;
}
.flexslider {
border: none !important;
box-shadow: none !important;
margin:0px !important;
padding: 0px !important;
margin-bottom: 10px !important;
background-color: #eee !important;
}
.slides li {
background-position: center;
-webkit-backface-visibility: hidden;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.flexslider_background {
height: 500px;
text-align: center;
}
.flexslider_content {
display: inline-block;
margin-top: 145px;
height: 350px;
width: 1000px;
border: 3px solid black;
}
.flexslider_content p {
float: left;
font-size: 2em;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/36928236
复制相关文章
相似问题
腾讯云开发者
