根据屏幕尺寸在 div 中缩放背景图片

Question

我有一个 div 包含一个背景图像，我想在右下角保持对齐，但我希望图像根据浏览器的大小进行缩放 window。我目前拥有的是：

backgnd {
    background: url(img/roneggler.png) no-repeat;
    position: fixed;
    bottom: 0px;
    right: 0px;
    width: 1000px;
    height: 1000px;
}

我尝试将 width 和 height 的值设置为 100%，但这会弄乱 div 的位置。本页的 link 可以在这里找到：http://inetgate.biz/ron.eggler/

Answer 1

CSS:

.container{
  width:100%;
}

您可以使用 jQuery:

var w = $(window).width();
$('.content').css('width', w);

Answer 2

你应该使用background-size: cover and width and height 100%;

backgnd {
    background: url(img/roneggler.png) no-repeat;
    position: absolute;
    background-size: cover;
    bottom: 0px;
    right: 0px;
    width: 100%;
    height: 100%;
}

Answer 3

好的，

我明白了，最终的解决方案是这样的：

.backgnd {
    background: url(img/roneggler.png) no-repeat;
    background-size: contain;
    background-position: right bottom;
    position: absolute;
    bottom: 0px;
    right: 0px;
    width: 100%;
    height: 100%;
}

诀窍是不使用 background-size: contain; 而不是 cover 来避免图像在大屏幕上一直放大。

根据屏幕尺寸在 div 中缩放背景图片

scale background image in div depending on screen size

html

css

background-image

scale