How to make image nested in div fill the remaining space on the page?
Question
I'm learning CSS and got stuck creating a layout that contains a header and an image that fills the rest of the screen. Using the following code, I'm able to achieve what I'm looking for:
html, body { height: 100%; margin: 0; }.container { display: flex; flex-direction: column; height: 100%; }.image-container { flex: 1; } img { width: 100%; height: 100%; object-fit: contain; }
<html> <body> <div class="container"> <div class="header"> <h1>Test Page</h1> </div> <:-- <div class="image-container"> --> <img src="https.//picsum.photos/500/300"/> <!-- </div> --> </div> </body> </html>
Now the problem is that I want to wrap the image element into a div as I'd like to position an overlay on top of the image. As soon as I nest the img within a div , the resizing doesn't work properly anymore. If the screen is wide, the image overflows to the bottom, creating a vertical scrollbar.
I've tried a lot of things, but nothing's worked so far. Can you explain to me why introducing the div ( image-container ) changes the layout and how to make it behave like the version without the div ? That'd be great, thanks in advance!
EDIT:
I want the image to be displayed exactly like in the snippet I posted. It should be as large as possible, but only so large that the whole image is still visible and nothing is cropped. For a wide window, there should be blank bars left and right of the image. For a narrow but tall window, there should be blank bars above/beyond the image.
My issue is that as soon as I add the <div class="image-container"> , the image always takes the whole width. For a wide window, I get scrollbars and can't see the whole image anymore. I'd like to know how I can get the image to scale like in the version without the additional <div> . I'd also like to understand why adding the <div> changes how the image is scaled.
EDIT 2:
Someone suggested to add overflow: hidden; on .image-container , but deleted their answer. This does in fact work ( overflow: hidden/scroll/auto; work, overflow: visible; does not), but now I'm completely confused to why that's the case. I thought that overflow would control if overflow is visible, but wouldn't affect the size of the content being displayed. In this case though, it seems like the overflow property does have an effect on the size of the picture being displayed. That's weird and if anyone knows what's going on, please let me know!
1 answers
solution1
0 2023-01-27 16:21:24
Flex is already helping the image take up as much space as possible, so the height: 100% and width: 100% were causing the image to grow.
For getting something to appear on top of the image, I would recommend looking into position: absolute or position: relative
html, body { height: 100%; margin: 0; }.container { display: flex; flex-direction: column; height: 100%; }.image-container { display: flex; justify-content: center; } img { object-fit: contain; }
<html> <body> <div class="container"> <div class="header"> <h1>Test Page</h1> </div> <div class="image-container"> <img src="https://picsum.photos/500/300" /> </div> </div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.