Question

我想将背景大小设为636px和1140px到背景图像而不是div。因为它的高度我不想要div的卷轴。

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

任何帮助都会很棒。

谢谢。

Answer 1

如果没有定义，div的高度将取决于内容的高度。

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

Answer 2

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

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

工作小提琴here

Answer 3

我不确定你要求的是什么。但是如果你想在不改变div大小的情况下改变背景图像大小，你应该使用图像<img/>或使用辅助div作为背景（参见下面的例子）。

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

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

＆＃13;

.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 {

}

＆＃13;

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

＆＃13;

CSS3：给背景图像赋予高度和宽度

3 个答案: