Auto height of a div with image 100%

Question

I have following layout:

CSS

.top-container{
width:100%;
height:auto;
position:relative;
}
.top-container img{
width:100%;
height:100%;
position:absolute;
z-index:1;
}

HTML

<div class="top-container">
<img src="blahblah" />
</div>

My problem is that i need the image to be width 100% (this is actually working), but the height must have an auto height because of the 100% width. I have tried with height:auto. But of course that did not help. It helped with a specific height, but then the image is scaled wrongly.

Any suggestions?

Answer 1

Jus make a small change in your image css as below:

.top-container img{
    width:100%;
    height:auto !important;
    position:absolute;
    z-index:1;
}

Demo

Answer 2

try this

use height:100vh and remove 100%;

http://jsfiddle.net/r4y6D/1/

.top-container{
width:100%;
height:auto;
position:relative;
}
.top-container img{
width:100%;
height:100vh;
position:absolute;
z-index:1;   
}

Answer 3

CSS

.top-container{
width:100%;
height:auto;
position:relative;
}
.top-container img{
width:100%;
height:auto;
position:absolute;
z-index:1;
}

HTML

<div class="top-container">
<img src="blahblah" />
</div>

I have change height:100% to height:auto in your coe. It should work now.

Answer 4

Not sure if the height is what you are looking for but see below.

http://jsfiddle.net/Nkcsr/1/

.top-container{
width:100%;
border: 1px solid black
}
.top-container img{
width: 100%
}