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 can I set up a static Webkit Mask

    how to set a table background image

    How to have a centered layout with border (background-image), and footer sticked to the bottom?

    Confusion as to how clearfix actually works

    How to divide a border into 4 equal parts?

    How to create a pulsing glow ring animation in CSS?

    how to make a space-keeping column use css and table tag

    How should I modify this code so it works with severel id's?

    Image won't show up html + css

    How to make TD behaving like TR(row) with CSS?

    How to include all css kept in a direcotry?

    How to style xml file? from xml to html using xslt and style that html using css [closed]

    How to add css style if user scroll page over 112px

    How to use jQuery and CSS to write vertical drawer

    How to add bootstrap css to my Wordpress plugin

    How to… Three wordpress sites with one css … ? child theme

    How to show parts of sprite with CSS keyframes to create animation?

    How do I allow CSS files to be referenced from other domains?

    How to crop and design these images like this using html and css? [closed]

    how to make button in ionic + css

    How to make DIVs flow to the left in a x-scrollable pane with CSS?

    Cant figure out how to apply css to menus in my footer

    How to get CSS in Javascript working correctly

    Text overlay over image on hover. How to stop other divs from moving

    How do i rotate text in css

    How can we prevent that when I resize my window, my images move using HTML-CSS?

    Creating a javascript notification plugin: How to align absolutely positioned divs on top of each other

    How to rotate image when scrolling using CSS transform?

    How can I integrate the code from this pen onto my site?

    How do I prevent it from newlining in html?