Question

我有一个带封面图片的网站。问题是当用户调整窗口大小时，背景不会保持全高。

我想要的：一个Jquery总是将背景图像放在div的中心，同时用户调整窗口大小（保持背景高度并使其宽度居中）。

$(document).ready(function() {

    $(window).on('resize', function() {

        //#TOP WIDTH
        var width = $('#top').width();

        //#TOP background IMG width
        var img = new Image;
        img.src = $('#top').css('background-image').replace(/url\(|\)$/ig, "");
        var bgImgWidth = img.width;

        //CALC
        var newImgWidth = (bgImgWidth - width) / 2; //THE PROBLEM

        //NEW BACKGROUND POSITION
        $('#top').css('background-size', newImgWidth + 'px' + ' 200' + 'px');

    });
});

如何对此进行计算以将背景始终置于中心100％DIV WIDTH并保持200px高度？

http://jsfiddle.net/h64vyr60/1/

Answer 1

我建议这个id #top css：

#top {
  background-image: url("http://www.kohmooksivalairesort.com/include/gallery/slide/13393910371.jpg");
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: auto auto;
  border-bottom: 1px solid black;
  height: 200px;
  width: 100%;
}

Answer 2

检查一下，也许这就是你需要的？

#top{
border-bottom:1px solid black;
width: 100%;
height: 200px;
background-image: url("http://www.kohmooksivalairesort.com/include/gallery/slide/13393910371.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;

}

http://jsfiddle.net/h64vyr60/3/

jquery背景始终位于div的中心，保持200px的高度

2 个答案: