Как добиться 100% размера элемента img, находящегося внутри полноэкранного фиксированного элемента? ⇐ CSS

[Гость]

I'm trying to make a lightbox-like element. I handled the JavaScript code that takes the clicked image's src and puts it in myImage etc. but I just can't manage to have it 100% height. It always crosses the paddings that box2 sets on bottom.

It works when I don't put the button, so it seems like I'm doing something wrong with it, maybe? I still need the button so this is the least amount of elements I need. IDK if it would work but just taking box2 out wouldn't solve it because I need the content width to be a maximum of 1200px.

I tried this:

* { box-sizing: border-box; } button { background-color: black; width: 32px; height: 32px; display: flex; justify-content: center; align-items: center; cursor: pointer; outline: none; flex-shrink: 0; border: none; } .box1 { display: flex; position: fixed; justify-content: center; align-items: center; padding: 0px 40px; top: 0; left: 0; width: 100%; height: 100%; z-index: 4; } .box2 { display: flex; align-items: end; height: 100%; justify-content: start; max-width: 1200px; width: 100%; gap: 80px; padding: 120px 0px; flex-direction: column; } .myImage { height: 100%; width: 100%; object-fit: contain; } PS: this is my first post! Hello world!


Источник: https://stackoverflow.com/questions/780 ... screen-fix