1

我目前正在使用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%,但我认为这会导致问题,因为滑块的实际宽度会根据幻灯片的数量而变化。

4

1 回答 1

2

这对于纯 css 是不可能的,但是可以使用一个简单的 JQuery 函数,就像这个fiddle一样。

$('document').ready(function(){
  function setImageHeight(){
    var bannerWidth = $('.banner').width();
    var imageHeight = 450 * bannerWidth/1903;
    $('.banner ul li').css('height', imageHeight.toString());
  }

  setImageHeight();

  $(window).resize(function(){
    setImageHeight();
  });

});
于 2014-08-17T20:11:20.917 回答