Menu
I'm trying to design a layout with css, I got one main container(div) and two inner container(div_upper and div_lower). let say I want to resize div_upper and div_lower will automatically resize itself and both divs still fit in the main container. I'm sure this can be done in javascript, but is there any CSS to accomplish this? if so I would be glad.
416
Answer: Use the CSS max-width Property You can simply use the CSS max-width property to auto-resize a large image so that it can fit into a smaller width <div> container while maintaining its aspect ratio.
For proportional resizing purposes, it makes matters extremely simple: Define the width of an element as a percentage (eg: 100%) of the parent's width, then define the element's padding-top (or -bottom) as a percentage so that the height is the aspect ratio you need. And that's it!
Syntax: height: length|percentage|auto|initial|inherit; Property Values: height: auto; It is used to set height property to its default value.
Another solution:
Use this class for getting auto vertical height -
.getAutoHeight {
position: relative;
overflow: auto; /* edit by thobens: overflow: hidden seems to be better, as (at least) IE 8 shows always a disabled scrollbar with overflow: auto */
}
<div class="getAutoHeight ">
any content<br />
any content<br />
any content<br />
any content<br />
</div>
Maybe this blogpost on the A List Apart website will help you in the right directions.
37
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
