CODEWITHSUNDEEP
htmlcss
Asif Iqbal
Asif Iqbal

Reputation: 1236

Why height percentage has no effect?

I have a html code where I am trying to change height with percentage. But it is not working and I am getting same sizes from three different tags.

This is the code:

<img src="smiley.gif" alt="Smiley face" style="width:40%; height:60%">

<img src="smiley.gif" alt="Smiley face" style="width:40%; height:10%">

<img src="smiley.gif" alt="Smiley face" style="width:40%; height:20%">

Upvotes: 0

Views: 86

Answers (2)

Oriol
Oriol

Reputation: 287960

If you use a percentage value in height property, it is calculated with respect to th height of its containing block.

However, if the height of its containing block depends on the content, it would be a circular reference.

Therefore, in that case, the percentage computes to auto.

This is explained in the spec:

10.5 Content height: the 'height' property

<percentage>

Specifies a percentage height. The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'.

Then, you can fix it setting an explicit height to the containing block.

div {
  height: 200px; /* explicit height */
  outline: 1px solid red;
}
img {
  display: block;
  outline: 1px solid blue;
  width: 40%;
  height: 10%;
}
img:first-child {
  height: 60%;
}
img:last-child {
  height: 20%;
}
<div>
  <img src="http://cdn.sstatic.net/stackoverflow/img/favicon.ico" alt="Favicon">
  <img src="http://cdn.sstatic.net/stackoverflow/img/favicon.ico" alt="Favicon">
  <img src="http://cdn.sstatic.net/stackoverflow/img/favicon.ico" alt="Favicon">
</div>

Upvotes: 4

Rob
Rob

Reputation: 15150

Images are inline elements where height is set by line height and inline boxes. To do what you show, you need to make the elements block level or inline-block where the height property can take effect.

Upvotes: 0

Related Questions