jquery - jQuery/CSS：全尺寸图像并居中

Question

基本上，我想在网站/屏幕的中心放置一本杂志的图片。

但是，该图像应该适合所有屏幕。

我试过类似的东西：

.magazine{
    background: url(../img/magazine.jpg) top center no-repeat;
    position: fixed;
    z-index: -1;
    width: 100%;
    height: 100%;
}

图像肯定在中心......但它变得很大并且全部被切断。

我怎样才能把它放在中心但屏幕的大小？

考虑过使用 jQuery 获取窗口大小并将其应用于它......但我不太确定这会起作用并且会处于中心位置。

Answer 1

你可以给它一个background-size: cover;，如果它比宽高，它与容器一样高，如果它比高宽，它与容器一样宽。或者您可以将其设置为background-size: 100% 100%;拉伸它，但它可能不尊重图像的比例。

Answer 2

这应该能让你到达你需要去的地方。过滤器将有助于 IE 兼容性。

.magazine {
    background-image: url(../img/magazine.jpg);
    width: 100%;
    height: 100%;
    z-index: -1;
    background-position: center;
    background-size: cover;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../img/magazine.jpg", sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../img/magazine.jpg", sizingMethod='scale')";

}