带右上角关闭按钮的响应式图片灯箱跨浏览器适配问题求助

原代码仅在Safari中正常运行，Chrome和Firefox里.inner的height: fit-content无法生效，核心原因是flex容器（.lightbox）的默认拉伸行为覆盖了该属性，导致.inner被拉满视口高度，而非自适应图片尺寸。

解决方案 #

通过以下调整实现跨浏览器兼容：

• 移除.inner的height: fit-content，改用max-height限制容器最大高度（适配视口减去内边距的空间）
• 确保图片自适应容器尺寸
• 优化关闭按钮样式，使其可见且定位合理

完整代码 #

* {
  box-sizing: border-box;
}

.lightbox {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 50px;
  background: rgba(0 0 0 / 0.9);
  margin: 0;
}

.inner {
  position: relative;
  max-height: calc(100vh - 100px); /* 减去上下padding总和，避免内容超出视口 */
}

img {
  display: block;
  max-width: 100%;
  max-height: 100%;
}

button {
  position: absolute;
  right: -40px;
  top: -40px;
  width: 40px;
  height: 40px;
  border: none;
  background: rgba(255,255,255,0.2);
  color: white;
  font-size: 24px;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

button:hover {
  background: rgba(255,255,255,0.4);
}

<div class="lightbox">
  <div class="inner">
    <img src="https://fakeimg.pl/1600x900" />
    <button>&times;</button>
  </div>
</div>

修改说明 #

• max-height: calc(100vh - 100px)：确保.inner不会超出视口范围，同时保留上下内边距的留白空间
• 移除height: fit-content：让.inner高度由图片自动撑开，同时受max-height限制避免溢出
• 按钮样式优化：添加背景、关闭图标、悬停效果，调整位置避免遮盖图片内容
• 保留flex布局的居中特性，确保图片在视口中垂直水平居中

内容的提问来源于stack exchange，提问作者Martin Petrov