CODEWITHSUNDEEP
htmlheightmedia-queries
Lex Coulstring
Lex Coulstring

Reputation: 53

Auto resize div height based on window width

I can't seem to get this. I have a media query of 590px screen width to have a div with this CSS

#slider {
width:100%;
height:250px;
background-color:#FF0000;

However now I want to have the height adjust smaller (from 250px) as you keep reducing the screen width (working with a responsive design). Auto, 100% won't work because I need to specify a starting height of 250px; and max-height does nothing.

Upvotes: 2

Views: 8679

Answers (3)

Matti Virkkunen
Matti Virkkunen

Reputation: 65156

There is a terrible, terrible hack to do this. But it usually works out smoother than using JavaScript to size the element.

Take advantage of the fact that padding values (event vertical ones) are always relative to the container width. Set a padding-top with a percentage value (you'll have to calculate it yourself because you didn't specify what you consider "normal screen width") on the slider element itself, or if that messes things up, put an extra element inside and set the padding on that. This of course pushes all normal flow content down, so you'll have to absolutely position them on top of the magic padding div.

Plus, unless you're absolutely positioning, width: 100% on a block element probably does nothing useful in your case.

Upvotes: 1

Tiago Marinho
Tiago Marinho

Reputation: 2216

You can do this easily using jQuery by storing the window width in a variable and then applying this variable in the element's height:

function changeHeight() {
    var width = $(window).width();
    $("div").css({
        "height": width
    });
}
window.addEventListener('resize', changeHeight);
changeHeight();

Since this javascript code changes the element's height using CSS, you can even apply CSS transitions to make the animation smoother.

JSFiddle

JSFiddle Demo using CSS transitions

Upvotes: 2

Tofandel
Tofandel

Reputation: 3585

You have to put both of the CSS properties

max-height:250px;
height:100%;

Upvotes: 1

Related Questions