图片不会缩小以适应响应式页面 DIV

Question

我正在努力让图像 (featuredpic) 遵守其父级 DIV 的最大高度限制。 mainCategory 的最大尺寸为 1000px 宽和 300px 高（由外部约束设置），当页面宽度缩小时，10:3 比例保持不变，因为它缩小时没有问题。但是，精选图片（原始尺寸为 250x250 像素）不会发生任何变化。我试过将最大高度、高度等设置为百分比的所有组合，但都没有成功。只有以像素为单位设置高度才会有效果，但这不适用于响应式设计。我什至插入了 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% 确定它为什么起作用，但它确实起作用了。我从 .featuredPicWrapper 中删除了 display: table; 并将 float:left 和 width:100% 添加到 .featuredPicContainer 并解决了问题。移除 Display 和添加 Float 是允许其调整大小的关键，添加宽度使其如我所愿保持在背景居中。

图片不会缩小以适应响应式页面 DIV

Image won't shrink to fit DIV with responsive page

html

css

responsive-design