CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Si8
Si8

Reputation: 9235

How to change height of DIV based on window size

I have 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>

Which displays an image on my page as a header. The issue I am having is when the browser is stretched the width changes but not the height.

Here is an example of a normal display monitor which displays the image just fine inside the DIV:

enter image description here

But if I stretch the browser, the image expands in width but not in height:

enter image description here

Here is the CSS:

#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%;
}

Can I use JQuery or even CSS to stretch the height based on the width of the DIV so the image doesn't look stretched on some screen?

Upvotes: 1

Views: 3640

Answers (1)

JayD
JayD

Reputation: 6541

  1. When you set a specific height on an image it will always stay that height regardless of browser resize

  2. When you set a specific height on a "container" or an element surrounding your image, your image will be constricted to that containers dimensions.(generally speaking)

You will need to remove your height: 400px if you wish for the image to resize.

Note: Your image will only 'grow' to its natural size. So if you have an image that is 200px high and 200px wide thats as big as it will get(without altering picture).

Also... If you must have at LEAST 400px height on your image - try using

image{
  min-height: 400px;
}

This is basically just setting your image so that the very smallest height that it can be is 400px;

If you want your image to grow dynamically with browser resize there are several ways to accomplish that. Check out this tutorial http://css-tricks.com/perfect-full-page-background-image/

Upvotes: 1

Related Questions