1

I am currently developing a website where I wish an image to be 25% of it's parent height.

I have looked at the following answers on SO and a few other similar answers on other sites:

The problem with the above answers is it either uses view-port units (vh), or it is aspect ratio based on the width. In my case, I would like to set an element to 25% of it's parent height. I have tried the below code, however it just sets the width of it to 100%.

main {
    --main-height: calc(100vh - var(--nav-height) - var(--body-top-padding)); 
    min-height: var(--main-height);
}

section {
    border: 1px solid red;
    width: 100%;
    min-height: calc(var(--main-height) / 2);
}
#profile > img {
    border: 1px solid black;
    height: 25%;
    padding-left: 100%;
}

Here, #profile is a section with an id of profile.

Edit

Here is what I feel like hack to do this:

#profile > img {
    border: 1px solid black;
    --width: calc(0.25 * var(--main-height));
    min-height: var(--width);
    width: var(--width);
}

Is there a better way which doesn't use CSS properties and calculations?

iProgram
  • 6,057
  • 9
  • 39
  • 80

1 Answers1

0

According to the given details, this should be enough:

.parent {
  height: 300px;
  width: 300px;
  border: 1px solid black;
}

.parent img {
  height: 25%;
  width: auto;
}
<div class="parent">
  <img src="https://visualhunt.com/photos/2/cat-feline-cute-domestic-young-looking-curious.jpg?s=s" />
</div>

Although, I should mention a few CSS limitations:

  • CSS relative height and width (%) can only be taken from a definitive value. meaning that only if the parent has a not relative height, can the children be set to relative height, and same goes for width.
  • Image resizing is not recommended, thus it's enough to set one of the attributes and let the other automatically fix it's ratio.

An easy way of seeing it would be to take this snippet and change the parent's height values to different things, and see how the image is affected.

If the height of the parent is not definitive through CSS, you can "hack" this feature using DOM.

setTimeout(() => {
  let parent = document.getElementById('parent');
  let image = document.querySelector('#parent img');
  
  let parentHeight = parent.offsetHeight;
  image.style.height = (parentHeight / 4) + 'px';
}, 2000);
#parent {
  height: 50%;
  width: 50%;
}

#parent img {
  height: 25%;
  width: auto;
}
<div id="parent">
  <img src="https://visualhunt.com/photos/2/cat-feline-cute-domestic-young-looking-curious.jpg?s=s" />
</div>

I wouldn't call it a perfect example because honestly it was tough simulating an unknown height container in this snippet feature - but I made it delayed in 2 seconds for the example to be visual.

fingeron
  • 1,152
  • 1
  • 9
  • 20
  • Thanks for the answer! Unfortunately, I do not know the size of the parent. – iProgram Jan 18 '20 at 14:49
  • If the height of the parent is not definitive, you will have to resort to Javascript. I will add this to my answer. – fingeron Jan 18 '20 at 14:50
  • Thanks for suggesting of a JavaScript method. I would like if posible, to have a elegant CSS way of doing it. I've came up with one in my edit, however it still seems a bit like a hack. – iProgram Jan 18 '20 at 14:56
  • Well, did you try the basic `height: 25%; width: auto`? Maybe the simple solution was the right solution all along – fingeron Jan 18 '20 at 15:03
  • Unfortunately, if I width: auto, it does create a square but with an height of 100%. Thanks anyway! – iProgram Jan 18 '20 at 15:05
  • Javascript is there to help us in dynamic situations, where the less dynamic HTML & CSS languages do not give us the elegant solutions we want. Congratz on reaching a proper CSS solution! As long as it works, what matters is that it's clear for you and people working with you on the code – fingeron Jan 18 '20 at 15:06