在浏览器窗口中将图片对齐到右下角

Question

我试图标记一个图片显示在网页的右下角。

如果我将页面的整体宽度设置为100%我把图片设置为浮在底部，这样效果很好，但是在上面上面提到的图片是一个更宽的图片，大约是1600px，所以当你在小窗口浏览器中打开页面时，浮动图片是对齐的，但是滚动条出现了，并且滚动到没有浮动图片的页面的全宽度。

body{width:100%;}
thepicture{width: 1289px;
height: 446px;
position:relative;
float:right;}

所以第二种方法:使body或包装器div固定宽度大于上面提到的图片:

身体{min-width: 1600 px;}

这看起来很棒，直到有人拥有超过1600px的屏幕…

第一个解决方案需要调整，但我不能弄清楚如何，一些响应浮动将是伟大的jquery也许?谢谢转发

问题是珍珠:)

Answer 1

更新

可能是这个作品:

body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%
    min-width: 1648px; /* the width of the longest element */
}
#bottomwrap {
    /* replace with your background color */
    background: url(path/to/picture) bottom right no-repeat;
    width: 100%;
} 

请记住将body margin, padding复位为零，将body height复位为100%

更新:

我已经为您的情况更新了解决方案，修改了HTML结构，您可以在这里查看http://jsbin.com/ulatis/1/edit

Answer 2

听起来你需要在这里使用一个背景图像。将背景设置为100%宽度的div，并将背景位置设置为right bottom。

div.background{background: url('images/bg.png') no-repeat right bottom; width: 100%}

Answer 3

试试position: fixed; z-index: -1;，它确实是你正在寻找的。示例