当满足媒体查询时，如何获取背景图像以填充div？

Question

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

这是一个显示我的麻烦的小提琴。

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>