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

Question

I am struggling to get an image ( featuredpic ) to respect the maximum-height bounds on its parent DIVs. The maximum dimensions of mainCategory is 1000px wide and 300px high (set by outside constraints) and when the page width shrinks, the 10:3 proportion is maintained as it shrinks with no issue. But, the featuredpic (native size of 250x250px) will not change at all. I've tried every combination of max-height, height, etc. set as percentages with no success. Only setting a height in pixels will have an effect, but that won't work with the responsive design. I even inserted the featuredPicContainer DIV to try to help control it, but it didn't make any visible change in my implementation. I'm assuming it's something to do with my use of absolute positioning, but I can't figure out an alternate solution. Any suggestions?

 /* 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

I found the solution. I'm not 100% sure why it worked, but it did. I removed the display: table; from .featuredPicWrapper and added float:left and width:100% to .featuredPicContainer and that resolved the issue. Removing the Display and adding the Float were key to allowing it to resize, and adding the width kept it centered over the background as I intended.