How to set the container height automatically maintaining the ratio


Tags: html,css,image,layout

Problem :

I have an img object within a div object. I want to set the width of img (or div) and have its height set automatically to whatever is necessary to retain the original ratio of the image.

Suppose I set the width to 200px, which is shorter than the image's natural width. When I do this:

HTML

<div id="container">
  <img id="foo" src="foo.png">
</div>

CSS

#foo{
  width: 200px;
}

or

#container{
  width: 200px;
}

the img has the height set to whatever is necessary to retain the original ratio, but the outer div has the height set to the inner image's natural height, and top and bottom margins are inserted between the inner img and the outer div.

I want the outer div's height to be whatever is necessary to retain the original ratio of img so that the top and bottom margin between div and img would become zero. How can I do that?



Solution :

Try this code

DEMO

<div class="container">
   <img src="demo.jpg" alt="" />
</div>

body{
    margin: 0;
}
.container{
    width: 200px;
    border: 1px solid red; //tmp added to check the height of container
}

.container img{
    display: block;
    width: 100%;
}

    CSS Howto..

    How does one override the JQuery UI styles?

    How to align logo and text in bootstrap on small screens?

    How would I get my horizontal navigation bar to span the full width?

    How to change the size of the radio button using CSS?

    style a navigation link when a particular div is shown

    How do I align these boxes using bootstrap?

    How to collectively center several divs within a parent div?

    How do I make current menu item active in asp.net webforms

    How to add an image to an anchor tag using CSS?

    How to tell what is the right css line to apply in nested classes

    CSS How to keep page centered, but still put stuff where I want

    How to change the current link color in navigation bar

    How to set a div's position inside another div to bottom right corner?

    How to make content div full height when using padding on wrapper?

    How to access files from this hierarchy?

    How to make an equal distance between elements footer?

    How to pause or delay animation using JavaScript/jquery

    Angular. How to set css properties for “after” and “before” DOM psuedo elements

    Image Filter and Show text on Mouseover

    CSS: show triangles in a row

    Dompdf: how to get background image to show on first page only

    How to find all next siblings from a particular class using css selectors

    CSS - How to deactivate the :hover pseudo class in IE 6

    jQuery (1.8.1/1.8.2), Internet Explorer 8: How to remove css attribute transparent?

    How to animate CSS Translate

    How to delete only the selected message inside a #Chat using jquery?

    How to same element with unique XPath/CSS selector by both ID and Class?

    CSS: How to align text, next to image inside a span?

    How to make a search bar clippable without pushing down elements, using 2 inputs

    CSS - How to create a table cell with a two-colour background?