如何让全屏fixed容器内的img元素实现100%尺寸适配？

数据老陈

2026-6-28

问题解决：Lightbox组件图片高度超出容器内边距的问题

问题描述

我正在制作类lightbox组件，已通过JavaScript获取点击图片的src并赋值给myImage，但无法让img实现100%高度——它总是超出box2设置的底部内边距。移除按钮时功能正常，但我需要保留该按钮，且box2需限制最大宽度为1200px。

问题原因

当前box2使用flex-direction: column且设置了height:100%，容器内包含按钮和图片两个子元素，图片设置height:100%会基于容器总高度计算，叠加按钮高度和gap的空间后，就会超出容器的内边距范围。

解决方案

修改图片的布局属性，让它自动占据容器的剩余空间，而非强制设置100%高度。调整后的代码如下：

调整后的CSS代码

* {
  box-sizing: border-box;
}

button {
  background-color: black;
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  outline: none;    
  flex-shrink: 0;
  border: none;
}

.box1 {
  display: flex;
  position: fixed;
  justify-content: center;
  align-items: center;
  padding: 0px 40px;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
}

.box2 {
  display: flex;
  align-items: end;
  height: 100%;
  justify-content: start;
  max-width: 1200px;
  width: 100%;
  gap: 80px;
  padding: 120px 0px;
  flex-direction: column;
}
.myImage {
  flex-grow: 1;
  width: 100%;
  object-fit: contain;
  min-height: 0;
}