我需要使用 CSS 属性 background-image 在容器中呈现图像

这里的问题是我需要呈现每张图片并保持其纵横比，并将图片的呈现最大化到图片的height 或width在容器内居中。

HTML:

<div class="fotowind shadow"></div>

编辑:

.fotowind 容器的初始 CSS 属性:

.fotowind {
    overflow:hidden;
    margin-left:10px;
    background:#333;
    margin-bottom:5px;
    z-index:30;
    background-position: center center !important;
    background-repeat: no-repeat;
} 

根据窗口大小动态构建属性的代码 - 我需要调整图像的大小以保持比例，即使是一些空白区域也要保留在两侧:

jQuery:

windowWidth = $(window).width();
windowHeight = $(window).height();

if (windowWidth <= 1200 && windowWidth > 768 || windowHeight < 900)
{
    $('.fotowind').css('width', '650px').css('height', '425px');
}
else if (windowWidth > 1200 || windowHeight > 900)
{
    $('.fotowind').css('width', '950px').css('height', '650px');
}

if (windowWidth <= 768)
{
    $('.fotowind').css('width', '450px').css('height', '425px');
}

生成的 HTML:

<div class="fotowind shadow" style="background-image: url(http://localhost/AdPictures/25/2c/c2/4c/-9/77/1-/4b/77/-b/ff/a-/57/e5/10/2b/31/b1/7516_1_xl.jpg); background-size: 100%; width: 950px; height: 650px; background-position: 50% 50%; background-repeat: no-repeat no-repeat;"></div>

在某些情况下，例如图片的大小为 800x600，我无法以该尺寸显示它，或者当图片为 200x650 时，例如，它变形为容器大小。

最佳答案

正如我所见，您已经在使用 jQuery，所以我假设您对 jQuery 解决方案持开放态度，因为，正如我阅读您的评论所说

I want to center the background-image if the viewport size exceeds the original image size, and if it's equal to or less than the real size, than you want a responsive background

所以在这里，我使用 jQuery 来检测窗口 height 和 width 并相应地调整你的 background-image

Demo

$(window).on('resize', function() {
    if($(window).width() < 300) { //original idth of your background image
        $('div.fotowind').css('background-size', '100% auto');
    } else if($(window).height() < 300) { //original height of your background image
        $('div.fotowind').css('background-size', 'auto 100%');
    } else {
        $('div.fotowind').css('background-size', 'auto');
    }
});

没有这样的 CSS 解决方案，因为我们没有 background-size 的 max-width 和 max-height 所以如果你正在寻找一个纯 CSS 解决方案，而不是你需要一个 absolute positioned img 标签，带有 max-height 和 max-width 定义了一个 z-index 设置为负数，但是你仍然会遇到一些关于元素中心定位的问题......

在你评论之后，你说图片的尺寸是动态的，容器是固定的，所以..

在这里，现在代码与固定的 width 容器元素完全兼容。您现在什么都不用做，它是完全动态的，这也要感谢 this帮助我获取图像的 height 和 width 的答案

$(document).on('ready', function() {
    var image_url = $('div.fotowind').css('background-image'), image;

    // Remove url() or in case of Chrome url("")
    image_url = image_url.match(/^url\("?(.+?)"?\)$/);

    if (image_url[1]) {
        image_url = image_url[1];
        image = new Image();
        image.src = image_url;
    }

    // just in case it is not already loaded
    $(image).load(function () {
        imgwidth = image.width;
        imgheight = image.height;

        if($('div.fotowind').width() < imgwidth) {
            $('div.fotowind').css('background-size', '100% auto');
        } else if($('div.fotowind').height() < imgheight) {
            $('div.fotowind').css('background-size', 'auto 100%');
        } else {
            $('div.fotowind').css('background-size', 'auto');
        }
    });
});

很少有演示来说明上述代码的实际操作...

Demo 1 (图像大小 > 元素大小)

Demo 2 (其中容器大小 > 图像大小)

Demo 3 (图片高度 > 容器高度)

Demo 4 (其中图像高度 > 容器高度 [2])

Demo 5 (图像宽度 > 容器宽度)

关于javascript - 保持背景图像的纵横比，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22571629/