CODEWITHSUNDEEP
cssimagestretch
simon
simon

Reputation: 2377

Auto height of a div with image 100%

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?

Upvotes: 2

Views: 23861

Answers (4)

Guruprasad J Rao
Guruprasad J Rao

Reputation: 29683

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

Upvotes: 3

Anks
Anks

Reputation: 485

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%
}

Upvotes: 1

Ahmed Habib
Ahmed Habib

Reputation: 189

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.

Upvotes: 1

Falguni Panchal
Falguni Panchal

Reputation: 8981

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;   
}

Upvotes: 3

Related Questions