I want to have a container that fills the whole screen. Inside is an image aligned to the center. The image is not any specific size. I'm using a transition effect to show the image appearing from the center (when it's loaded by changing a class).
My first thought was to use Flexbox for this task. And it's working mostly as it should. The image gets squashed from time to time (depending on image size), so I use object-fit: scale-down. This works up to a point, except box-shadow causes a problem. When I change the scale of the viewport and the image scales down, the shadow stays the same (also the size of the image in developer tools appears to be wrong).
How can I solve this issue?
Here a simplified example of what I have:
body { margin: 0;}.box { position: absolute; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: lawngreen;}img { max-height: 100%; max-width: 100%; min-height: 1px; box-shadow: 0 0 5px black; object-fit: scale-down;}<div class="box"><img src="https://via.placeholder.com/500x300" /></div>