CODEWITHSUNDEEP
cssimagehtmlheight
s.calin
s.calin

Reputation: 83

Resize img height according to div height

Hello everybody,

I have this CSS that acts weirdly and i dont' understand why. Please help undestand why:

THE CSS

html body{
width:100%;
height:100%;
background-color:#000;
margin:0;
}


.top
{
margin-left:7.5%;
margin-right:7.5%;
height:8.1%;  width:85%;
position:relative;
border-bottom:#FFFFFF solid thin;
}
.top img
{
height:100%;
}

THE HTML:

<body>
<div class="top" align="center">
<img src="images/titlu_trans.png" alt="Sigla companie Calin Events"/>
</div>

Now Safari interpret's this correctly by setting the div height to 8.1% of the total resolution height and then the img height at 100% of the div height so at 8.1% of the viewing resolution. But Chrome, on a Windows machine does not and interprets this by setting the img's height at 100% of the viewing resolution height. Why is this happening?

Upvotes: 0

Views: 1497

Answers (2)

Moob
Moob

Reputation: 16204

You need to size both the html and the body.

Change html body{ to html, body{ (note the comma)

http://jsfiddle.net/FXhPZ/

Upvotes: 1

Radius Kuntoro
Radius Kuntoro

Reputation: 448

I don't see any problems with my latest Chrome using your code above. The image resized properly, proportional to the div.

Another solution is to set the image as background, and use 

background-size: cover;

or

background-size: contain;

Note that this method only works in modern browsers. Reference: http://www.w3schools.com/cssref/css3_pr_background-size.asp

Upvotes: 0

Related Questions