html - How to ensure the image inside a DIV resizes with browser resize -

html - How to ensure the image inside a DIV resizes with browser resize -

works fine (the image fills div , resizes based on browser size):

<div class="pageimghdrmain"> <div id="pageimghdrsub"> <div class="pageimgholder" style="background: #fcf;"> <img src="theimages/dummybanner.jpg" style="width: 100%; height: auto;" /> </div> </div> </div>

doesn't work, image stretched out , cuts off browser resizes:

<div class="pageimghdrmain"> <div id="pageimghdrsub"> <div class="pageimgholder" style="background: #fcf;"> <div id="ctl00_bodyplaceholder_specialtycontentblockimg"> <div> <div style="display:none;" align="left"></div> <p><img src="art.jpg" alt="artthumbone" title="artthumbone" class=""><br></p> </div> </div> </div> </div> </div>

css:

.pageimghdrmain { width: 100%; overflow: hidden; margin: 0 auto; text-align: center; } .pageimghdrsub { position: relative; width: 100%; margin: 0 auto; /*center-aligned*/ } .pageimgholder { position: relative; margin: 0px; padding: 0px; float: left; top: 0px; left: 0px; width: 1100px; height: 337px; overflow: hidden; } .pageimgholder div div p img { width: 100%; height: auto; }

i think messing there nested div within main div.

how can resolve issue.

what inner unnamed divs for?

i think need set #ctl00_bodyplaceholder_specialtycontentblockimg position:absolute; min-width:100%; min-height:100%; max-width:100%; max-height:100%;

also might want consider renaming id :-)

the thing is, when utilize absolute positioned element within element (your relative positioned element) - forcefulness absolute same size. might not work inner relative element.

the unnamed divs have static default , behaves more or less relative positioned elements.

hope helps.

html css responsive-design