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

Question

I have a website with a cover image. The problem is when a user resizes the window, the background does not stay in full height.

What I want: A Jquery to always put the background image in the center of the div whilst the user resizes the window (keeping the background height and center its width).

$(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');

    });
});

How can I CALC this to put background always in center 100% DIV WIDTH and keeping 200px height?

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

Answer 1

i propose this 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

check this out, maybe this is what you need?

#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/