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>