如何让竖版图片在模态框中响应式显示并保持宽高比？

给定一张2500px宽、4500px高的竖版图片，要放入100vw×100vh的模态框中实现响应式显示且保持宽高比，以下是具体的CSS实现方案：

DOM结构回顾 #

<div class="modal">
   <div class="image-wrapper">
      <img src="..." />
   </div>
</div>

CSS实现 #

1. 模态框基础样式 #

让模态框占满整个视口，并用Flex布局实现图片容器的居中对齐，同时隐藏溢出内容防止滚动条出现：

.modal {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  /* 可选：添加深色背景提升图片可读性 */
  background-color: #000;
}

2. 图片容器设置 #

.image-wrapper作为图片的外层容器，核心是限制自身最大尺寸不超出模态框，同时预留样式扩展空间：

.image-wrapper {
  max-width: 100%;
  max-height: 100%;
  /* 可选：添加内边距、边框或阴影优化视觉效果 */
  padding: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

3. 图片自适应设置 #

利用图片的原生比例特性，只需限制图片的最大宽高为容器的100%，就能让图片自动缩放且保持原始比例，不会超出模态框范围：

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

进阶：固定比例容器（可选） #

如果需要在图片加载前维持容器的固定比例（避免布局跳动），可以使用aspect-ratio属性（现代浏览器均支持），对应图片的原始比例2500:4500（简化为5:9）：

.image-wrapper {
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 5/9;
}

.image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* 确保图片完整显示，不拉伸、不裁剪 */
}

这种方案能让容器始终保持图片的竖版比例，即使图片尚未加载完成，也能维持布局稳定性。

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