Fit a div containing an image to a percentage of screen height

Question

I got a div surrounding an image (set to 100% width & height), trying to get it to fill 70% of the screen's height, but percentage values to the div's height have no effect, only exact px values.

.gallery {
      display: block;
    width: 100%;
    height: 70%
}

.gallery img {
      width: 100%;
      height: 100%;
      object-fit: cover;
}

<div class="gallery fade">
    <img src="https://picsum.photos/100/100" alt="">
</div>

position:absolute; makes it work, but completely messes up the rest of the site.

I can't really think of any way to keep the margin and make it take up 70% of the screen height.

Using background-image would still need absolute position plus wouldn't work with the animations I have set up.

Can you give us a bit more context of that div? How is its parent height set etc? — A Haworth, Jul 25 '23 at 14:49

score 0 · Answer 1 · answered Jul 25 '23 at 14:28

If you want to get some percentage of screen size you can use vh (screen height) and use vw (screen width). For example, to get 70% present of screen size you can use CSS code as follows.

.gallery {
    display: block;
    width: 100%;
    height: 70vh
}

And about % value in CSS. which means the size of the parent element. height: 70% means 70% height of the parent element's height. height: 70vh describes 70% of screen height value.

Hope this answer helpful for you.

score 0 · Answer 2 · answered Jul 25 '23 at 14:30

To make the .gallery div fill 70% of the screen's height while maintaining the rest of the site's layout, you can use a combination of position: relative and height: 70vh. The vh unit represents a percentage of the viewport's height. Here's how you can modify your CSS:

.gallery {
    display: block;
    width: 100%;
    height: 70vh; /* Use vh (viewport height) unit here */
    position: relative; /* Use relative positioning */
}

.gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

By setting height: 70vh for the .gallery div, it will now take up 70% of the screen's height while keeping its position within the flow of the document.

If the rest of the site is still not behaving as expected, you may need to adjust other elements' positioning and layout to accommodate the changes you made to the .gallery div. Make sure that other elements' styles do not interfere with the positioning of .gallery.

Additionally, if you have animations set up for the .gallery div, those should still work fine as long as the structure and class names remain unchanged.

Fit a div containing an image to a percentage of screen height

2 Answers2