我目前正在使用unslider在网页( http://fths.convoke.info)上创建全宽滑块标题。它在我设计的尺寸(1920x450)下工作正常,但在不同的分辨率下,事情变得很奇怪。看一看:
背景图像按比例缩放,使其宽度适合屏幕,但实际li
元素具有固定高度并且不会调整大小,留下图片中显示的间隙。
这是滑块设置本身的 HTML:
<div class="banner" style="overflow: hidden; width: 1904px; height: 450px;">
<ul style="width: 300%; position: relative; left: -200%; height: 450px;">
<li style="width: 33.333333333333336%; background-image: url(http://fths.convoke.info/wp-content/uploads/2014/08/header450-02.jpg); background-size: 100%;"></li>
<li style="width: 33.333333333333336%; background-image: url(http://fths.convoke.info/wp-content/uploads/2014/08/header450-01.jpg); background-size: 100%;"></li>
<li style="width: 33.333333333333336%; background-image: url(http://fths.convoke.info/wp-content/uploads/2014/08/header450-03.jpg); background-size: 100%;"></li>
</ul>
</div>
和CSS:
.banner { position: relative; overflow: auto; }
.banner li { list-style: none; }
.banner ul li {
float: left;
height: 450px;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
-ms-background-size: 100% 100%;
background-size: 100% 100%;
background-repeat: no-repeat;
}
min-height
我尝试了and的各种组合max-height
,但我无法真正让它发挥作用。高度需要有一些值,否则li
元素会自行塌陷。background-size:cover
看起来也很有希望,但是图像根本无法缩放,并且在非常窄的分辨率下看起来很糟糕。
为了让它工作,我想我需要一种方法来设置高度,li
以便它保持与背景图像相同的相对比例。有没有办法用 CSS 来做到这一点,还是我需要编写脚本?我发现这种通过使用“设置”高度的方法padding-top:x%
,但我认为这会导致问题,因为滑块的实际宽度会根据幻灯片的数量而变化。