javascript – 保持背景图像的宽高比

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

这里的问题是,我需要呈现每个保持其纵横比的图像,并将图像的呈现最大化到容器中心图像的高度或宽度.

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

例如,在某些图像尺寸为800×600的情况下,我无法以此尺寸呈现,或者当图像具有200×650时,会变形为容器大小.

解决方法

当我看到你已经在使用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来检测窗口的高度和宽度,因此我调整你的背景图像大小

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解决方案,因为我们没有max-width和max-height的背景大小,所以如果你正在寻找一个纯CSS的解决方案,而不是需要一个绝对定位的img标签,max-height和max-width定义为z-index设置为负,但仍然会遇到有关元素中心定位的一些问题…

在你评论之后,你说图像的尺寸将是动态的,容器会被修改.

在这里,现在的代码完全兼容您的固定宽度容器元素..你现在不需要什么,它是完全动态的,也感谢this的答案,这有助于我获取图像的高度和宽度

$(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 – 保持背景图像的宽高比

解决方法

猜你在找的JavaScript相关文章