通过 CSS 的 aspect-ratio 属性可强制容器维持指定宽高比，配合 width: 100% 和 overflow: hidden，确保封面图像自适应缩放且不拉伸变形。
通过 css 的 `aspect-ratio` 属性可强制容器维持指定宽高比，配合 `width: 100%` 和 `overflow: hidden`，确保封面图像自适应缩放且不拉伸变形。
在响应式布局中，卡片（如图书封面卡片）常因父容器尺寸变化而失去原始比例——宽度随视口缩小，但高度未同步收缩，导致视觉失真（如封面被压扁或拉长）。根本原因在于：原代码仅用 max-width 和 max-height 限制尺寸上限，却未声明宽高之间的约束关系。
✅ 正确解法是使用现代 CSS 的 aspect-ratio 属性。它直接定义元素的宽高比（如 250 / 380 可简写为 250/380），浏览器会自动按该比例计算高度（当宽度由上下文决定时）或宽度（当高度固定时），从而实现真正的等比缩放。
以下是优化后的关键 CSS 修改（仅需调整 .book 类）：
.book {
position: relative;
border-radius: 10px;
width: 100%; /* 确保宽度响应父容器 */
aspect-ratio: 250 / 380; /* 核心：锁定宽高比（原图尺寸） */
max-width: 250px; /* 可选：设定最大宽度，防过度放大 */
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 和 img 以适配新布局：
.cover {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 10px;
cursor: pointer;
transition: transform 0.5s;
transform-origin: left;
box-shadow: 1px 1px 12px rgba(0, 0, 0, .1);
display: flex;
align-items: center;
justify-content: center;
}
.cover img {
width: 100%;
height: 100%;
object-fit: cover; /* 关键：裁切填充，避免拉伸 */
border-radius: 10px;
}
⚠️ 注意事项：
- aspect-ratio 兼容性良好（Chrome 88+、Firefox 89+、Safari 15.4+），旧版浏览器可搭配 padding-top 技巧降级（如 padding-top: 152% 对应 250/380 ≈ 152%），但本例推荐优先使用原生属性；
- 移除 max-height: 380px —— 它与 aspect-ratio 冲突，会截断高度计算；
- object-fit: cover 替代原 width/height: 100%，确保图片在等比缩放后仍完整覆盖区域，不出现留白或扭曲；
- 若内容文字在小屏下拥挤，建议对 .book-content 添加 font-size: clamp(12px, 4vw, 15px) 实现流体字号，提升小屏可读性。
最终效果：无论视口如何缩放，.book 始终保持 250:380 的精确比例，封面图像随之等比缩放，结构稳定、视觉一致。
