Works fine (the image fills up the DIV and 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, the image is stretched out and cuts off as the 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 what is messing it up is there are nested DIV inside the main DIV.
How can I resolve the issue.