Question

我有一个JS脚本：

window.onresize = function() {
var height = $(window).height(); 
var width = $(window).width(); 
$(".item").height(height);
}

和相关的HTML是：

<div class="carousel-inner">
    <div class="item active">
      <img src="">
      <div class="container">
        <div class="carousel-caption">
          <h1>Example headline.</h1>
          <p>Example Text</p>
          <p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
        </div>
      </div>
    </div>

它的效果很好，因为项目div被缩放到浏览器高度。但我想要的是将图像设置为该高度，并按宽度方式缩放。我意识到图像的左/右可能会出现裁剪 - 这很好，但我需要成像以基本填充这个div。

因此图像高度由浏览器高度决定，然后宽度成比例，因此它也会填充浏览器宽度。那有意义吗？我确定我错过了一些简单的事情。

Answer 1

将此添加到您的CSS：

.item {
    background: url(path/to/image/goes/here.png) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

另外，这是一个建议。不要使用window.onresize，而是尝试使用以下内容（因为您使用的是jQuery）：

$(window).on('resize', function() {
    var h = $(window).height();
    var w = $(window).width();
    $('item').height(h).width(w);
});

图像到浏览器高度，宽度成比例

1 个答案: