图像不会缩小以适合带有响应页面的DIV

Question

我正在努力获取图像（featuredpic）以尊重其父DIV的最大高度范围。 mainCategory的最大尺寸为1000像素宽和300像素高（由外部约束设置），并且当页面宽度缩小时，比例保持为10：3，因为它没有问题。但是，featurepic（本机尺寸为250x250px）完全不会改变。我尝试过将最大高度，高度等的所有组合设置为百分比，但均未成功。仅将高度设置为像素会产生效果，但是不适用于自适应设计。我什至插入了featuredPicContainer DIV来尝试帮助控制它，但是它没有对我的实现进行任何可见的更改。我假设这与我使用绝对定位有关，但我想不出另一种解决方案。有什么建议吗？

/* And the CSS: */

.mainCategory {
  box-sizing: border-box;
  position: relative;
  margin-bottom: 10px;
}

.mainPic {
  display: block;
}

.mainGradient {
  box-sizing: border-box;
  position: absolute;
  top: 0;
}

.mainTextWrapper {
  box-sizing: border-box;
  position: absolute;
  top: 0;
  color: #eef7f6;
  text-align: center;
  height: 100%;
  display: table;
  width: 15%;
  padding: 5px;
}

.mainText {
  box-sizing: border-box;
  display: table-cell;
  vertical-align: middle;
}

.mainSectionWrapper {
  box-sizing: border-box;
  position: absolute;
  top: 0;
  display: table;
}

.featuredPicWrapper {
  box-sizing: border-box;
  position: absolute;
  top: 0;
  color: #eef7f6;
  text-align: center;
  height: 100%;
  display: table;
  padding: 5px;
  width: 85%;
  right: 0;
}

.featuredPicContainer {
  box-sizing: border-box;
  display: table-cell;
  vertical-align: middle;
  height: 100%;
}

.featuredPic {
  box-sizing: border-box;
  height: 100%;
}

<div class="mainCategory">
  <a href="link">
    <img class="mainPic" src="background.jpg">
    <img class="mainGradient" src="gradient.jpg">
    <div class="mainTextWrapper">
      <div class="mainText">FEATURED PICTURE</div>
    </div>
    <div class="featuredPicWrapper">
      <div class="featuredPicContainer">
        <img class="featuredPic" src="featuredpic.jpg">
      </div>
    </div>
  </a>
</div>

Answer 1

我找到了解决方案。我不是100％知道它为什么起作用，但是确实如此。我从display: table;中删除了.featuredPicWrapper，并向float:left中添加了width:100%和.featuredPicContainer，从而解决了该问题。移除显示器并添加Float是允许其调整大小的关键，并按照我的意图添加宽度使其在背景上居中。