Thay vì sử dụng background-image bạn có thể sử dụng img trực tiếp và hình ảnh hiển thị cả chiều rộng của khung nhìn bằng cách sử dụng max-width: 100%; thì sẽ không áp dụng được bất kỳ padding hoặc margin đến div container vì chúng sẽ làm tăng tổng chiều rộng của khung. Sử dụng quy tắc này, bạn có thể có một hình ảnh rộng bằng chiều rộng của trình duyệt và chiều cao cũng sẽ thay đổi theo tỉ lệ.
$(window).resize(function(){
var windowWidth = $(window).width();
var imgSrc = $('#image');
if(windowWidth <= 400){
imgSrc.attr('src','http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a');
}
else if(windowWidth > 400){
imgSrc.attr('src','http://i.stack.imgur.com/oURrw.png');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="image-container">
<img id="image" src="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a" alt=""/>
</div>