通过 CSS 的 aspect-ratio 属性可强制元素维持固定宽高比，配合合理的尺寸约束（如 min-width、max-width）和内容布局优化，即可在页面缩放时确保卡片（如图书封面）不发生形变。
通过 css 的 `aspect-ratio` 属性可强制元素维持固定宽高比，配合合理的尺寸约束（如 `min-width`、`max-width`）和内容布局优化，即可在页面缩放时确保卡片（如图书封面）不发生形变。
在您提供的代码中，.book 容器目前仅设置了 max-width: 250px 和 max-height: 380px，但二者是独立限制，浏览器会优先满足宽度或高度中的某一项，导致实际渲染尺寸偏离原始比例（250×380 ≈ 5:7.6），尤其在小屏幕下高度被压缩，封面图像被拉伸或裁切失真。
根本解法：使用 aspect-ratio
现代 CSS 提供了原生支持——aspect-ratio 属性，它定义元素的宽高比（如 250 / 380 可简化为 25 / 38 或保留整数比 250 / 380），浏览器将自动计算高度（当宽度由上下文决定时）或宽度（当高度受限时），从而严格保持比例：
.book {
position: relative;
border-radius: 10px;
/* 移除 max-height，改用 aspect-ratio 控制比例 */
aspect-ratio: 250 / 380; /* 精确对应封面图原始尺寸 */
max-width: 100%; /* 允许在容器内弹性缩放 */
min-width: 250px; /* 可选：防止过小影响可读性 */
width: 100%; /* 配合父容器 flex/inline 布局更稳定 */
background-color: whitesmoke;
box-shadow: 1px 1px 12px rgba(0, 0, 0, .7);
border: 1px solid rgba(0, 0, 0, .2);
transform-style: preserve-3d;
perspective: 2000px;
display: flex;
flex-direction: column;
overflow: hidden; /* 关键：防止内容溢出破坏比例 */
}
同时需注意 .cover 的定位逻辑：当前 position: absolute + width: 100%; height: 100% 是正确的，但必须确保其父容器（.book）具备明确的尺寸上下文——而这正由 aspect-ratio 提供保障。
额外优化建议：
- 移除 .book-content 的绝对定位依赖（当前未设 position: relative），改为 flex 内部流式布局；
- 将 .book-content 设置为 position: relative; z-index: 2;，确保文字层位于封面图上方且不干扰比例计算；
- 图片使用 object-fit: cover 替代直接拉伸，保证视觉完整性：
.cover img { width: 100%; height: 100%; border-radius: 10px; object-fit: cover; /* 保持比例并填满 */ }
✅ 最终效果：无论视口如何缩放，.book 始终以 250:380 的比例自适应宽度，封面图不畸变，文字区域随容器自然收缩，兼顾响应性与视觉一致性。该方案兼容 Chrome 88+、Firefox 89+、Safari 15.4+ 及 Edge 91+；如需支持旧浏览器，可降级使用「padding-top 技巧」（伪元素 + 百分比内边距），但 aspect-ratio 是当前最简洁、语义最清晰的标准解法。
