使用CSS aspect-ratio属性时，如何为A4图片设置最大高宽并保持响应式？

我有一张原始尺寸为A4的图片，宽高比为1/1.414。希望在屏幕上响应式显示该图片，随屏幕缩放调整大小，但不能超过容器高度的100%或宽度的50%。已通过CSS的aspect-ratio属性设置宽高比，它能随宽度响应，但不随高度响应，达到容器高度时仍继续放大，忽略max-height属性。需要img元素在保持宽高比的同时，遵循max-height和max-width属性。

补充说明：会有多个页面堆叠，设置宽度为50%是为了实现翻书动画效果，因此使用绝对定位。

现有代码：

.container {
  height: 80vh;
  min-width: 80vw;
  border: solid 1px red;
}

.page {
  position: absolute;
  top: 0;
  left: 50%;
  width: 50%;
  max-width: 50%;
  max-height: 100%;
}

img {
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 1 / 1.414;
}

<div class="container">
  <div id="page1" class="page">
    <img src="A4Sizedimg_600px_x_848px" alt="">
  </div>
</div>

问题根源 #

1. 容器未设置position: relative，导致绝对定位的.page以视口为基准，而非容器，max-height:100%无法正确作用于容器高度。
2. 图片设置width:100%强制占满父容器宽度，aspect-ratio基于宽度计算高度，导致高度可能超过容器max-height限制。

修正后代码 #

.container {
  position: relative; /* 让绝对定位的子元素以容器为基准 */
  height: 80vh;
  min-width: 80vw;
  border: solid 1px red;
}

.page {
  position: absolute;
  top: 0;
  left: 50%;
  width: 50%;
  max-width: 50%;
  max-height: 100%;
  display: flex; /* 可选：让图片在.page内居中显示 */
  align-items: center;
  justify-content: center;
}

img {
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 1 / 1.414; /* 维持A4宽高比 */
  object-fit: contain; /* 可选：确保图片完整显示，比例正确时可省略 */
}

<div class="container">
  <div id="page1" class="page">
    <img src="A4Sizedimg_600px_x_848px" alt="">
  </div>
</div>

关键调整说明 #

• 给.container添加position: relative，确保.page的定位和尺寸限制完全基于容器。
• 移除图片的width:100%，仅保留max-width和max-height，让浏览器根据容器的宽高限制自动计算图片尺寸，同时aspect-ratio保证比例不变。
• .page的flex布局用于让图片在容器内居中，若不需要可直接删除，不影响核心响应式缩放功能。

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