Question 215597 in Html Question posted in
Some basic documentation can be found here.

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

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.

<div class="gallery fade"> <img src="1.jpg" alt=""></div>

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

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

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 margins 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’ve set up.

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search