当满足媒体查询时，如何获取背景图像来填充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>