不幸的是，此类问题的大多数解决方案要么依赖 css3，要么忽略保留图像原始纵横比的“覆盖”的本机功能。 https://github.com/louisremi/background-size-polyfill 应该保持比例，但是当以某些方式拉伸浏览器时，我永远无法让它完全工作（操作员错误，我敢肯定:-)）。为了解决这个问题，我编写了一个 jquery 脚本，我已经在 safari、chrome、ff 和 ie8+ 上进行了测试。您会注意到您必须使用绝对定位的 img 而不是 css 背景图像。只需在 html 的标签中添加 bgImg 作为 id。
CSS：
.container { height: auto; overflow:hidden; position:relative;}
.container #bgImg { position:absolute; z-index:-1;}
您的图像选择器必须绝对定位才能使其位于内容后面。这意味着您的父容器必须具有 position: relative 然后 overflow: hidden 以便从图像中溢出的任何内容（由于您要保持比例，因此不可避免地会隐藏其中的某些部分）。另请注意，父容器中的某些显示标签会破坏溢出的隐藏。
查询：
$(window).load(function () {
// only do this once and pass as function parameters, because chrome
// and safari have trouble not only with document.ready but window.resize
var img = new Image();
img.src = $("#bgImg").attr('src');
var $width_orig = img.width;
var $height_orig = img.height;
resizeBGImage($width_orig, $height_orig);
$(window).resize(function () {
resizeBGImage($width_orig, $height_orig);
});
});
function resizeBGImage($width_img_orig, $height_img_orig) {
// get dimensions of container
var $width_container = $('.container').outerWidth();
var $height_container = $('.container').outerHeight();
// calculate original aspect ratio and ratio of the container
var $imageratio = $width_img_orig / $height_img_orig;
var $containerratio = $width_container / $height_container;
var $wdiff = $width_container - $width_img_orig;
var $hdiff = $height_container - $height_img_orig;
// original size, so just set to original
if (($wdiff == 0) && ($hdiff == 0)) {
$("#bgImg").css('width', $width_img_orig);
$("#bgImg").css('height', $height_img_orig);
}
// if container is smaller along both dimensions than the original image,
// set image to container size
else if (($wdiff < 0) && ($hdiff < 0)) {
$("#bgImg").css('width', $width_img_orig);
$("#bgImg").css('height', $height_img_orig+1); // adding one because chrome can't do math
}
// if container is wider than long relatiave to original image aspect ratio
// set width to container width and calculate height
else if ($containerratio > $imageratio) {
$("#bgImg").css('width', $width_container);
// calculate height using orig aspect ratio and assign to image height
$("#bgImg").css('height', (($width_container * $height_img_orig) / $width_img_orig) + 1); // adding one because chrome can't do math
}
// else container is taller than long relatiave to original image aspect ratio
// set height to container height and calculate width
else {
// set the image height to container height
$("#bgImg").css('height', $height_container + 1); // adding one because chrome can't do math
// calculate width using orig aspect ratio and assign to image width
$("#bgImg").css('width', (($height_container * $width_img_orig) / $height_img_orig));
}
$("#bgImg").css('left', (($width_container - $("#bgImg").width()) / 2).toString() + 'px');
};
注意使用 $(window).load() 而不是 $(document).ready()。 Chrome 和 safari 似乎对后者有问题，因为在这些浏览器中，当 DOM 加载时，背景图像可能没有完全加载。使用 $(window).load() 可确保所有窗口元素在脚本运行之前就位。