CSS 固定图片弹窗如何适配视口并保持图片比例？

2026-11-04数据小许

结论

不要同时将图片的 width 和 height 设为 100%。这样图片元素会按容器的宽高布局。object-fit: contain 可以让图片内容保持比例，但弹窗高度仍需合理限制。可以将弹窗设为纵向布局并限制整体高度，再让图片在按钮和说明文字之外的空间内缩放。

调整 CSS

.showcase {
  position: fixed;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: 85vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 5;
  transition: all 0.5s ease;

  pointer-events: none;
  opacity: 0;
  scale: 90%;
}

.showcase.visible {
  pointer-events: all;
  opacity: 1;
  scale: 100%;
}

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

.showcase 的 max-height: 90vh 将弹窗高度限制在视口高度的 90% 以内。图片的 max-height: 75vh 则为关闭按钮和说明文字留出空间。图片宽度受弹窗限制，高度会按比例自动计算；达到最大高度时，浏览器会缩小图片，使其保持在限制范围内。按钮、图片和段落仍按纵向排列。

75vh 是根据按钮和文字占用空间预留的示例值。图片以外的内容较高时，可以适当调低；内容较少时可以调高，但要为其他内容留出空间。视口单位 vh 表示视口高度的百分比。

注意事项

删除图片上的 height: 100%，改用 height: auto，避免强行拉伸图片。
object-fit: contain 会保持图片内容的比例，但不会单独限制弹窗的整体高度，因此仍需设置 max-height。
如果要让弹窗在较窄的窗口中也保留边距，可以把 width: 85vw 改为 width: min(85vw, 900px)。900px 是可按页面设计调整的宽度上限。
示例中的 &.visible 是嵌套 CSS 写法。若当前构建环境不支持 CSS nesting，可改写为 .showcase.visible。