html - 满足媒体查询时，如何让背景图像填充 div？

Question

我在 flexbox 中有 div，我希望它们在屏幕达到 992px 时变为全宽。当它达到 992px 时，.tileImage 跨度仍设置为 300px x 215px。但是，如果我将 .tileImage 设置为 100% 的宽度和高度，图像就会一起消失。

这是一个显示我的麻烦的 fiddle 。

https://jsfiddle.net/jseymour186/fs0z2qLu/27/

.flexBoxContainer {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;
  width: 100%;
}

.flexBoxItem {
  margin: 5px;
  background-color: #CBB677;
}

.joshButtons {
  background-color: #CCB677;
  padding: 10px;
  margin: 5px;
  border-radius: 5px;
}

#articleBody .joshButtons {
  color: white;
  text-decoration: none;
}

.tileImage {
  background-repeat: no-repeat;
  background-size: 100%, 100%;
  background-position: center;
  width: 300px;
  height: 215px;
  display: block;
  -webkit-transition: background-size .5s;
  /* For Safari 3.1 to 6.0 */
  transition: background-size .5s;
}

.flexBoxItem:hover .tileImage {
  background-size: 110%, 110%;
}

#districtBudget {
  background-image: url(http://www.baschools.org//vimages/shared/vnews/stories/59bab952b682e/District%20Budget.jpg);
}

#bondFunds {
  background-image: url(https://baschools.socs.net/vimages/shared/vnews/stories/59bab952b682e/Bond%20Funds.jpg);
}

#perPupilFunding {
  background-image: url(http://www.baschools.org/vimages/shared/vnews/stories/59bab952b682e/Per%20Pupil%20Funding.jpg);
}

#teacherPay {
  background-image: url(http://www.baschools.org/vimages/shared/vnews/stories/59bab952b682e/Teacher%20Pay.jpg)
}

#fundingTimeline {
  background-image: url(https://baschools.socs.net/vimages/shared/vnews/stories/59bab952b682e/BudgetTimeline3.jpg)
}

@media screen and (max-width: 992px) {
  .flexBoxItem {
    width: 100%;
    padding-top: 66.66%;
  }
}

<div class="flexBoxContainer">

  <div class="flexBoxItem">
    <a href="/vnews/display.v/ART/5b7b2c4ff2277">
        <span alt="District Budget" class="tileImage" id="districtBudget"></span>
      </a>
  </div>
  <div class="flexBoxItem">
    <a href="/vnews/display.v/ART/5b7b2c4ff2277">
        <span alt="Bond Funds" class="tileImage" id="bondFunds"></span>
      </a>
  </div>

  <div class="flexBoxItem">
    <a href="/vnews/display.v/ART/5b7b2c4ff2277">
        <span alt="Per Pupil Funding" class="tileImage" id="perPupilFunding"></span>
      </a>
  </div>
  <div class="flexBoxItem">
    <a href="/vnews/display.v/ART/5b7b2c4ff2277">
        <span alt="Teacher Pay" class="tileImage" id="teacherPay"></span>
      </a>
  </div>
  <div class="flexBoxItem">
    <a href="/vnews/display.v/ART/5b7b2c4ff2277">
        <span alt="Funding Timeline" class="tileImage" id="fundingTimeline"></span>
      </a>
  </div>
</div>

Answer 1

您应该将带有百分比的 padding-top 移动到图像容器中:

.flexBoxContainer {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;
  width: 100%;
}

.flexBoxItem {
  margin: 5px;
  background-color: #CBB677;
}

.joshButtons {
  background-color: #CCB677;
  padding: 10px;
  margin: 5px;
  border-radius: 5px;
}

#articleBody .joshButtons {
  color: white;
  text-decoration: none;
}

.tileImage {
  background-repeat: no-repeat;
  background-size: 100%, 100%;
  background-position: center;
  width: 300px;
  height: 215px;
  display: block;
  -webkit-transition: background-size .5s;
  /* For Safari 3.1 to 6.0 */
  transition: background-size .5s;
}

.flexBoxItem:hover .tileImage {
  background-size: 110%, 110%;
}

#districtBudget {
  background-image: url(http://www.baschools.org//vimages/shared/vnews/stories/59bab952b682e/District%20Budget.jpg);
}

#bondFunds {
  background-image: url(https://baschools.socs.net/vimages/shared/vnews/stories/59bab952b682e/Bond%20Funds.jpg);
}

#perPupilFunding {
  background-image: url(http://www.baschools.org/vimages/shared/vnews/stories/59bab952b682e/Per%20Pupil%20Funding.jpg);
}

#teacherPay {
  background-image: url(http://www.baschools.org/vimages/shared/vnews/stories/59bab952b682e/Teacher%20Pay.jpg)
}

#fundingTimeline {
  background-image: url(https://baschools.socs.net/vimages/shared/vnews/stories/59bab952b682e/BudgetTimeline3.jpg)
}

@media screen and (max-width: 992px) {
  .flexBoxItem {
    width: 100%;
  }
  .flexBoxItem .tileImage {
    width: 100%;
    padding-top: 66.66%;
    height: auto;
  }
}

<div class="flexBoxContainer">

  <div class="flexBoxItem">
    <a href="/vnews/display.v/ART/5b7b2c4ff2277">
      <span alt="District Budget" class="tileImage" id="districtBudget"></span>
    </a>
  </div>
  <div class="flexBoxItem">
    <a href="/vnews/display.v/ART/5b7b2c4ff2277">
      <span alt="Bond Funds" class="tileImage" id="bondFunds"></span>
    </a>
  </div>

  <div class="flexBoxItem">
    <a href="/vnews/display.v/ART/5b7b2c4ff2277">
      <span alt="Per Pupil Funding" class="tileImage" id="perPupilFunding"></span>
    </a>
  </div>
  <div class="flexBoxItem">
    <a href="/vnews/display.v/ART/5b7b2c4ff2277">
      <span alt="Teacher Pay" class="tileImage" id="teacherPay"></span>
    </a>
  </div>
  <div class="flexBoxItem">
    <a href="/vnews/display.v/ART/5b7b2c4ff2277">
      <span alt="Funding Timeline" class="tileImage" id="fundingTimeline"></span>
    </a>
  </div>
</div>