Question

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

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

我尝试将width和height值设置为100%，但这会使div的位置变得混乱。可以在此处找到此页面的链接：http://inetgate.biz/ron.eggler/

Answer 1

你应该使用background-size：cover和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 2

CSS：

.container{
  width:100%;
}

你可以使用jQuery：

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

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中的背景图像

3 个答案: