Kevin Powell - Community•2mo ago

need help with height units in css

<div> 
<img src='img.file' alt='img' />
</div>

<div> 
<img src='img.file' alt='img' />
</div>

div{ 
height:50vh;
width:100%;
background-color:red;
}
div img { 
height:100%; 
}

div{ 
height:50vh;
width:100%;
background-color:red;
}
div img { 
height:100%; 
}

So if I set height:100% in img it fits in that div height but if I set vh it doesn't work , can sum1 explain why ?

6 Replies

Mannix•2mo ago

it's working. it's 100% of a parent so the 100% is gonna be 50vh if you set that as height on the parent

vic•2mo ago

Is there any other units to use instead of %

Mannix•2mo ago

what are you trying to achieve ??

clevermissfox•2mo ago

See if aspect-ratio will work for your usecase, heights should really be avoided whenever possible and I find myself using aspect ratio for my images or image wrappers if I need it to change from its intrinsic/natural aspect ratio

Chris Bolson•2mo ago

What exactly isn't working? and, as Mannix has already asked, what is that you want to achieve? % = percentage of its parent (height). If you give the parent a height of 50vh (50% of the viewport height), and give the image a height of 100%, it will be 100% the height of its parent which, in this case, is 50% of the viewport. vh = percentage of viewport height so 1vh = 1% viewport height. If you assign a vh unit to the image it will disregard the height of its parent and set its height according to the viewport height. Therefore, again in this specific case, where the parent is set to 50vh, setting the image to have a height of 50vh is exactly the same as giving it 100%. However, if you also give your parent element some padding, that 100% height on the image will now not be the same as 50vh as the 100% has to take into account the padding.

vic•2mo ago

I actually want to understand that why % is working but not vh , but I read u r text yeah I Clear now Nvm but thanks

Gaming

Programming

need help with height units in css