适合背景图片的Div大小

Question

我正在尝试将div尺寸设为背景图像的大小。当我设置背景图像时，它会被切断（见下图）。我尝试将背景大小设置为100％的宽度和高度。

我的代码

  .centerimage {
      display: block
      margin-left: auto;
      margin-right: auto;
      width: 100%;
    }
    .Internet{
      background-image: url("content/happylaptoplady.png");
      margin-top: 100px;
      width: 250px;
      float: left;
      margin-right: 30px;
      margin-left: 130px;
      text-align: center;
    }
    .Phone{
      margin-top: 100px;
      float: left;
      width: 250px;
      margin-right: 30px;
      text-align: center;
    }
    .Television{
      margin-top: 100px;
      float: left;
      width: 250px;
      margin-right: 30px;
      text-align: center;
    }
    .Service {
      text-align: center;
      font-weight: 600;
    }
    .Dollar {
      font-size: 20px;
    }
    .Benefits {
      float: left;
    }

<img src="content/severroom.png" class="centerimage" />
    
    <div class="Internet">
      <h3>INTERNET</h3>
      <h7>CABLE, DSL & RURAL WIRELESS</h7>
      <h4 class="Pricing">From <span class="Dollar">$29.99</span> per month!</h4>
      <ul class="Benefits">
        <li class="Benefits">UNLIMITED PLANS AVAILABLE</li>
        <li class="Benefits">NOW WITH LOWER PRICES</li>
        <li class="Benefits">FASTER SPEEDS - UP TO 60 MBPS!</li>
      </ul>
    </div>
    <div class="Phone">
      <h3>PHONE</h3>
      <h7>RESIDENTIAL & COMMERCIAL</h7>
    </div>
    <div class="Television">
      <h3>TELEVISION</h3>
      <h7>SHAW DIRECT / INTERNET TV</h7>
    </div>


  

Answer 1

您应该创建一个包装器来包装所有文本，包装器应该有背景图像。 我修改了你的html / css。请检查一下。 https://jsfiddle.net/2n4fy3bc

.wrapper {
  background: url('http://i.imgur.com/HLSuhdi.png') no-repeat;
  width: 288px;
  height: 257px;
  border: 2px solid orange;
}
.Internet {
  text-align: center;
}
.Phone {
  width: 250px;
  margin-right: 30px;
  text-align: center;
}
.Television {
  text-align: center;
}
.Television h3 {
  margin: 0;
}
.Service {
  text-align: center;
  font-weight: 600;
}
.Dollar {
  font-size: 20px;
}
.Benefits {
  list-style: none;
  margin: 4px 0;
}
.Benefits li {
  margin: 2px 0;
}
h3,
h4 {
  margin: 5px 0;
}

<div class="wrapper">
  <div class="Internet">
    <h3>INTERNET</h3>
    <h7>CABLE, DSL & RURAL WIRELESS</h7>
    <h4 class="Pricing">From <span class="Dollar">$29.99</span> per month!</h4>
    <ul class="Benefits">
      <li class="Benefits">UNLIMITED PLANS AVAILABLE</li>
      <li class="Benefits">NOW WITH LOWER PRICES</li>
      <li class="Benefits">FASTER SPEEDS - UP TO 60 MBPS!</li>
    </ul>
  </div>
  <div class="Phone">
    <h3>PHONE</h3>
    <h7>RESIDENTIAL & COMMERCIAL</h7>
  </div>
  <div class="Television">
    <h3>TELEVISION</h3>
    <h7>SHAW DIRECT / INTERNET TV</h7>
  </div>
</div>

由于您使用了背景图像，因此图像应固定宽度和高度以获得最佳显示效果（不能按比例放大或拉伸......）。 因此，您必须知道文本的空间。如果您使用div，它将根据您的内部内容自动增加高度。

Answer 2

将以下css添加到类

.Internet{
      background-image: url("http://datadrivendetroit.org/wp-content/uploads/2015/03/Jobs-Graphic.jpg");
          background-repeat: no-repeat;
        background-size: 100% 100%;

      margin-top: 100px;
      width: 250px;
      float: left;
      margin-right: 30px;
      margin-left: 130px;
      text-align: center;
    }

＆＃13;

＆＃13;

.centerimage {
  display: block
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}
.Internet{
  background-image: url("http://datadrivendetroit.org/wp-content/uploads/2015/03/Jobs-Graphic.jpg");
      background-repeat: no-repeat;
    background-size: 100% 100%;

  margin-top: 100px;
  width: 250px;
  float: left;
  margin-right: 30px;
  margin-left: 130px;
  text-align: center;
}
.Phone{
  margin-top: 100px;
  float: left;
  width: 250px;
  margin-right: 30px;
  text-align: center;
}
.Television{
  margin-top: 100px;
  float: left;
  width: 250px;
  margin-right: 30px;
  text-align: center;
}
.Service {
  text-align: center;
  font-weight: 600;
}
.Dollar {
  font-size: 20px;
}
.Benefits {
  float: left;
}

＆＃13;

<img class="centerimage" />

<div class="Internet">
  <h3>INTERNET</h3>
  <h7>CABLE, DSL  RURAL WIRELESS</h7>
  <h4 class="Pricing">From <span class="Dollar">$29.99</span> per month!</h4>
  <ul class="Benefits">
    <li class="Benefits">UNLIMITED PLANS AVAILABLE</li>
    <li class="Benefits">NOW WITH LOWER PRICES</li>
    <li class="Benefits">FASTER SPEEDS - UP TO 60 MBPS!</li>
  </ul>
</div>
<div class="Phone">
  <h3>PHONE</h3>
  <h7>RESIDENTIAL COMMERCIAL</h7>
</div>
<div class="Television">
  <h3>TELEVISION</h3>
  <h7>SHAW DIRECT / INTERNET TV</h7>

＆＃13;

＆＃13;

＆＃13;