本文讲解如何在 HTML/CSS 中实现 figure 元素悬停时视觉放大效果，同时保持 1px 边框粗细不变——核心方案是避免使用 transform: scale()，改用显式调整 width 和 font-size 配合 CSS 过渡，确保边框不随缩放失真。
本文讲解如何在 html/css 中实现 figure 元素悬停时视觉放大效果，同时保持 1px 边框粗细不变——核心方案是避免使用 `transform: scale()`，改用显式调整 `width` 和 `font-size` 配合 css 过渡，确保边框不随缩放失真。
在 Web 开发中，常需为图文组合（如 <figure></figure>）添加悬停放大交互以提升可读性或视觉焦点。但直接使用 transform: scale() 会无差别放大整个元素及其所有视觉属性——包括边框（border）、阴影、字体描边等，导致 1px 边框被拉伸为 4px（当 scale(4) 时），破坏设计一致性。
✅ 正确思路：分离缩放逻辑，仅放大内容尺寸，而非几何变换
即：
- 悬停时增大
<figure></figure>的width（从而自然撑开图像宽度）； - 同步增大
<figcaption></figcaption>的font-size，使文字按比例“变大”； - 所有
border声明保持固定像素值（如1px solid #555），不受任何缩放影响。
以下是推荐的生产级实现：
#pub_img {
border: 1px solid #555; /* 固定 1px，永不缩放 */
float: right;
width: 80px;
transition: width 0.4s ease-in-out; /* 仅过渡 width，更精准 */
}
#pub_img:hover {
width: 320px; /* 放大至约 4 倍宽度（80 × 4 = 320），图像自动等比拉伸 */
}
#pub_img figcaption {
border-top: 0.1px solid gray;
background-color: #ffffff;
font-size: 0.2em; /* 初始极小字号 */
text-align: justify;
margin-top: 4px;
padding: 2px 4px;
}
#pub_img:hover figcaption {
font-size: 0.8em; /* 按需提升至合适可读大小，非强制 4×，避免过小/过大 */
font-weight: 600;
transition: font-size 0.4s ease-in-out, font-weight 0.4s ease-in-out;
}? 关键说明：
transition: all易引发性能问题且不可控，建议明确指定需过渡的属性（如width、font-size）；- 图像本身无需额外设置
width: 100%外的 transform，因父容器#pub_img宽度变化后，img { width: 100% }会自动响应；- 若需更精细控制文字入场动效（如淡入+展开），可结合
grid布局与grid-template-rows过渡（见进阶示例），但对多数场景，纯font-size过渡已足够简洁高效。
? 注意事项：
- 避免在
:hover中使用transform: scale()+border组合——这是本问题的根本诱因； - 若图形容器含
padding或margin，也应检查其是否参与过渡，防止布局抖动； - 在高 DPI 屏幕下，
0.1px边框可能不可见，建议改用thin或min(0.1px, 1px)（CSSclamp()）增强兼容性。
通过这种「尺寸驱动」而非「变换驱动」的设计，你既能获得清晰、可控的悬停放大体验，又能严格保证 UI 元素（尤其是边框、分割线）的像素级精度——这才是专业前端交互的底层实践准则。
