始终按比例调整背景图像的大小以使用中心点缩放 [英] Resizing background-image always proportionally to scale with a center point

问题描述

我想在调整大小时可以重现此网站图片的行为。

I want to be able to reproduce the behavior of this website's image when resizing.

似乎背景图片有一个中心点，

It seems like the background-image has a center point where the image start to crop when it cannot keep its proportion scale.

以下是一个示例：

http://themes.evgenyfireform.com/wp-jad/

目前我的背景有以下css：

For now my background has the following css:

#bg {
    position: fixed;
    top: 0;
    left: 0px;
    width:100%;
}

问题是，它是固定的，

The problem is that it's fixed and I want it to crop when the image can't be scale.

推荐答案

您正在寻找此组合：

background-position:50% 50%;  /* Sets reference point to scale from */
background-size:cover;        /* Sets background image to cover entire element */

工作示例小提琴。

请注意，这是 IE8不支持，如果您需要支持IE8或更高版本，则需要JS hackery。

Note that this is not supported by IE8 and will require JS hackery there if you need IE8 or older to be supported.

这篇关于始终按比例调整背景图像的大小以使用中心点缩放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！