CSS3 :为背景图像提供高度和宽度

Question

我想为背景图像而不是div提供636px和1140px的背景大小，因为我不想要div的滚动，因为它的高度。

如果我给父div高度和宽度，那么我会得到背景图像，但是当我给背景大小时，它不起作用。

.custom_app_phone_div {
margin: 5% auto 0 auto;
height:auto;
width:auto;
}
.custom_app_phone_div .custom_app_phone_bg_image_div {
background: url("http://i.imgur.com/jIE5Bf7.png") no-repeat;
background-position-x: center;
background-size:636px 1140px;;

width: 100%;
height: 100%;
padding: 10px;
}

<div class="custom_app_phone_div">
<div class="custom_app_phone_bg_image_div">
</div>
</div>

任何帮助都会很棒。

谢谢。

Answer 1

如果未定义，div 的高度将由内容的高度决定。

您可以做的是设置min-heigh属性。

Answer 2

我不确定你要什么。但是，如果您想在不更改div 大小的情况下更改背景图像大小，则应使用图像<img/>或使用辅助程序div 作为背景(请参阅下面的示例(。

现在，如果要摆脱滚动条，可以将父容器设置为高度/宽度.custom_app_phone_div并设置overflow: hidden。

您可以尝试一下，让我们知道这是否适合您吗？

.custom_app_phone_div {
margin: 5% auto 0 auto;
height:auto;
width:auto;
}
.custom_app_phone_div .bgHelper{
background: url("http://i.imgur.com/jIE5Bf7.png") no-repeat;
background-position-x: center;
background-size: contain;
height: 1140px;
width: 636px;
}
.custom_app_phone_div .custom_app_phone_bg_image_div {
}

<div class="custom_app_phone_div">
<div class="bgHelper"></div>
<div class="custom_app_phone_bg_image_div">
</div>
</div>

Answer 3

使用任何图像编辑器将背景图像的大小设置为636px x 1140px，然后使用：

background: url("http://i.imgur.com/jIE5Bf7.png") center no-repeat;

在这里工作小提琴