div auto adjust height according to page width

Question

I have a div with width:100%, and I need the height of the same div to adjust according to how many pixels wide the page is. The reason is because an image is stretched across full width of the div, and if I set a solid height, different resolutions will render it differently and the image looks stretched out.

Is there a css solution to this?

score 1 · Answer 1 · answered Aug 11 '12 at 22:56

1

You could leave it as auto:

<div id="mydiv"><img src="..." /></div>

#mydiv,#mydiv>img{width:100%; /*height:auto;*/}

You can omit height:auto because is the default value.

answered Aug 11 '12 at 22:56

Oriol

274,082
63
437
513

1

thanks! this worked like a charm. I had height defined somewhere else in a child element that's why it wasn't working. – kidA Aug 11 '12 at 23:15
@user1572447 If it worked, then you could mark it as the answer to your question (click the outline of a tick below the votes at the left hand side) :) – starbeamrainbowlabs Aug 12 '12 at 09:18

score 1 · Answer 2 · answered Aug 11 '12 at 22:57

you can do that with css media queries see http://www.w3.org/TR/css3-mediaqueries/

basically you'll have a bunch of media queries like the following:

@media (min-width: 1024px) { 
  div {height: 200px;}
}

obviously change the width and height combinations to whatever you need, and you can also use max-width or width as required

div auto adjust height according to page width

2 Answers2