Stopping fixed div from going off screen after being resized

Issue happens because the image is set to width: 100% and height: 100%. When a vertical image loads, it forces the container to grow beyond the viewport height.

Instead, you should limit the image size relative to the viewport using max-height and max-width.

.showcase img { border-radius: 15px; max-width: 100%; max-height: 90vh; width: auto; height: auto; object-fit: contain; }

max-height: 90vh ensures the image never exceeds the viewport height.

max-width: 100% keeps the image within the container width.

width: auto and height: auto preserve the original aspect ratio, preventing stretching.

object-fit: contain ensures the image scales properly.

This allows both horizontal and vertical images to scale down automatically without pushing the fixed container off the screen.

Your problem comes from

.showcase img{ width: 100%; height: 100%; }

This forces the image to always fill the container, which causes overflow when the image is tall or wide. Use max-width and max-height relative to the viewport

.showcase img{ border-radius: 15px; max-width: 100%; max-height: 80vh; width: auto; height: auto; object-fit: contain; }

Also you can improve the container layout make the .showcase a flex container so the text and button stay aligned regardless of image size

.showcase{ pointer-events: none; opacity: 0; scale: 90%; position: fixed; width: 85%; max-height: 90vh; display: flex; flex-direction: column; align-items: center; z-index: 5; top: 50%; left: 50%; translate: -50% -50%; transition: all 0.5s ease; } .showcase.visible{ pointer-events: all; opacity: 1; scale: 1; }

You can also prevent giant horizontal images by adding this

.showcase img{ max-width: 90vw; }