为何Lightbox图片无法占满更多屏幕？求自适应缩放方案

问题描述 #

我已经花了好几个小时尝试，还是没法让图片占满更多屏幕。把图片width设为auto，还是有黑边留白；max-height设为90vh来给标题和按钮留空间，可实际高度只占屏幕一半左右。我想要做一个Lightbox，让任意尺寸的图片自适应填满水平或垂直边缘。

现有代码 #

CSS代码 #

.myLightbox{
  width: 100%;
  height: 100vh;
  background: black;
  position: fixed;
  display: flex;
  flex-direction: column;
  vertical-align: center;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.myLightboxImage{
  width: auto;
  max-width: 100%;
  max-height: 90vh;
}

JSX代码 #

<div className="myLightbox">
   <div>
       <button style={{position: "absolute", top: "25px", right: "25px"}} onClick={() => imgAction()}>X</button>
       <img src={data.img.url} className="myLightboxImage"/>
   </div>
</div>

解决方法 #

修改后的CSS #

.myLightbox{
  width: 100%;
  height: 100vh;
  background: black;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.myLightboxImage{
  max-width: 100vw;
  max-height: 90vh;
  object-fit: contain; /* 保持图片比例完整显示，如需裁切填充可改为cover */
}

修改后的JSX #

<div className="myLightbox">
  <button style={{position: "absolute", top: "25px", right: "25px"}} onClick={() => imgAction()}>X</button>
  <img src={data.img.url} className="myLightboxImage"/>
</div>

修改说明 #

• 移除.myLightbox中的flex-direction: column和无效的vertical-align: center，通过flex直接居中图片
• 删除多余的嵌套div，避免容器额外限制图片尺寸
• 将图片max-width改为100vw，确保水平方向能填满屏幕可用宽度
• 添加object-fit: contain保证图片按比例缩放，完整填充到设定的最大宽高范围内，无变形且尽可能占满空间

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