Fix Fixed-Position Overlays for Tall Images with Max‑VH Constraints

by

Summary

A fixed‑position overlay that fills 85 % of the viewport works for landscape images, but vertical images exceed the viewport height, pushing the button and caption off‑screen. The fix is to constrain the overlay’s dimensions to the viewport and let the image scale proportionally using max-width/max-height with object-fit: contain.

Root Cause

  • The container .showcase is sized only by width (width: 85%).
  • The image is forced to width: 100%; height: 100%, so it stretches to fill the container’s height, ignoring its natural aspect ratio.
  • When a tall image is loaded, the container’s height grows beyond the viewport, causing overflow.

Why This Happens in Real Systems

  • Developers often size a modal by a single dimension (usually width) and let the other dimension grow unrestricted.
  • Using height: 100% on the image makes it ignore the viewport limits and forces the parent to expand.
  • Fixed positioning does not automatically prevent overflow; you must explicitly bound the element.

Real-World Impact

  • User experience: Buttons, captions, or close controls become inaccessible.
  • Accessibility: Keyboard‑only users cannot reach the close button.
  • Layout bugs: Scrolling may be unintentionally introduced, breaking the “fixed” illusion.

Example or Code (if necessary and relevant)


  
  preview
  
this is an image


.showcase {
  position: fixed;
  inset: 0;                         /* top/right/bottom/left = 0 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 85vw;                  /* respect viewport width */
  max-height: 85vh;                 /* respect viewport height */
  margin: auto;
  padding: 1rem;
  background: rgba(0,0,0,.8);
  opacity: 0;
  pointer-events: none;
  transform: scale(0.9);
  transition: opacity .5s, transform .5s;
}
.showcase.visible {
  opacity: 1;
  pointer-events: all;
  transform: scale(1);
}

/* Image scales proportionally, never exceeds container bounds */
.showcase img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 15px;
}

/* Keep button aligned even when image shrinks */
.showcase .close {
  align-self: flex-end;
  margin-bottom: 0.5rem;
  background: #fff;
  border: none;
  cursor: pointer;
}

How Senior Engineers Fix It

  • Constrain both axes with max-width: 85vw and max-height: 85vh.
  • Remove the forced height: 100% on the image; use max-width/max-height plus object-fit: contain to preserve aspect ratio.
  • Make the overlay a flex container so the close button and caption stay positioned relative to the image regardless of its size.
  • Add inset: 0 + margin: auto to guarantee centering without manual translate.
  • Test with extreme aspect ratios and on mobile viewports.

Why Juniors Miss It

  • They tend to size by a single dimension (usually width) and forget about height overflow.
  • They often use width: 100%; height: 100% on images, assuming the parent will clip it, which actually forces distortion.
  • Lack of familiarity with flexbox or viewport units leads to manual positioning hacks (translate, top/left 50%) that don’t handle overflow gracefully.

Leave a Comment