适合背景图像到div

Question

我在下面的div中有一个背景图像,但图像被切断了:

 <div style='text-align:center;background-image: url(/media/img_1_bg.jpg);background-repeat:no-repeat;width:450px;height:900px;' id="mainpage" align="center">

有没有办法显示背景图像而不切断它？

Answer 1

您可以使用该background-size属性实现此功能,现在大多数浏览器都支持该属性.

要缩放背景图像以适合div:

background-size: contain;

缩放背景图像以覆盖整个div:

background-size: cover;

JSFiddle示例

还存在用于IE 5.5+支持的过滤器,以及一些旧版浏览器的供应商前缀.

Answer 2

如果您需要的是图像具有相同的div尺寸,我认为这是最优雅的解决方案:

background-size: 100% 100%;

如果没有,@ grc的答案是最合适的答案.

资料来源:http: //www.w3schools.com/cssref/css3_pr_background-size.asp

Answer 3

你也用这个:

background-size:contain;
height: 0;
width: 100%;
padding-top: 66,64%; 

我不知道你的div值,但我们假设你已经得到了这些值.

height: auto;
max-width: 600px;

同样,这些只是随机数.使用固定宽度的div可能很难制作背景图像(如果你想要),所以最好使用max-width.实际上,使用背景图像填充div并不复杂,只需确保以正确的方式设置父元素的样式,因此图像有一个可以进入的位置.

克里斯

Answer 4

尝试以下任一方法，

background-size: contain;
background-size: cover;
background-size: 100%;

.container{
    background-size: 100%;
}

该background-size属性指定背景图像的大小。

您可以使用此属性使用不同的语法：关键字语法（“auto”、“cover”和“contain”）、一值语法（设置图像的宽度（高度变为“auto”）、两个-value 语法（第一个值：图像的宽度，第二个值：高度）。

• 百分比- 设置背景图像的宽度和高度（以父元素的百分比表示）。
• cover - 调整背景图像的大小以覆盖整个容器，即使它必须拉伸图像或从边缘之一切掉一点
• 包含- 调整背景图像的大小以确保图像完全可见

欲了解更多信息：https ://www.w3schools.com/cssref/css3_pr_background-size.asp

Answer 5

您可以使用以下属性：

background-size: contain;
background-repeat: no-repeat;

然后您的代码如下所示：

 <div style="text-align:center;background-image: url(/media/img_1_bg.jpg); background-size: contain;
background-repeat: no-repeat;" id="mainpage">

Answer 6

background-position-x: center;
background-position-y: center;