jQuery/CSS : Full-sized image and centered

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%; 以拉伸(stretch)它，但它可能不符合图像的比例。