I am facing an issue with the following HTML code:
<div id="subpageHeaderImageSection">
<div id="subpageHeaderLeft">
<span id="holdImageP"></span>
<!--[if lte IE 10]><img id="igm" src="theImages/subpageHeaderImageP.png" /><![endif]-->
</div>
</div>
It displays an image on my page as a header, but when the browser is stretched, only the width changes and not the height.
For example, on a normal display monitor, the image fits fine inside the DIV:
However, stretching the browser causes the image to expand in width but not in height:
The CSS used is as follows:
#subpageHeaderImageSection {
position: relative;
top: 0;
width: 100%;
height: 400px;
}
#subpageHeaderLeft {
position: absolute;
width: 100%;
height: 100%;
}
#holdImageP {
position: absolute;
left: 0;
width: 100%;
height: 100%;
background: url('../theImages/subpageHeaderImageP.png') no-repeat;
background-size: 100% 100%;
}
Is there a way to use JQuery or CSS to dynamically adjust the height based on the width of the DIV so that the image doesn't appear stretched on some screens?