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')";

}

jQuery / CSS：全尺寸图像和居中

2 个答案: