CSS3：为背景图像设置高度和宽度

Question

我想给背景图像而不是div设置636px和1140px。 因为我不想要div的滚动条，因为它的高度。

如果我给父div设置高度和宽度，那么我会得到背景图像，但是当我给background-size设置时，它将不起作用。

 .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

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

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

在这里工作

Answer 3

我不确定您要什么。 但是，如果要更改背景图像大小而不更改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>