本文介绍一种替代 CSS transform: scale() 的方案，通过直接调整元素宽高和字体大小实现悬停放大效果，从而避免边框随缩放被拉伸变形的问题。
本文介绍一种替代 css `transform: scale()` 的方案，通过直接调整元素宽高和字体大小实现悬停放大效果，从而避免边框随缩放被拉伸变形的问题。
在网页开发中，使用 transform: scale() 实现悬停放大是一种常见做法，但它会对整个元素（包括边框、阴影、文字等）进行统一缩放——这意味着原本 1px 的边框在 scale(4) 后会视觉上变为 4px，破坏设计一致性，且可能引发布局抖动或文字模糊。
根本原因在于：transform: scale() 是一种视觉变换，不改变文档流与盒模型尺寸，但会等比放大所有渲染像素，包括边框宽度（CSS 中 border-width 是绝对长度单位，缩放时按比例拉伸）。
✅ 推荐解法：放弃 scale()，改用「显式尺寸控制」
即：通过修改 width、height、font-size 等属性，让元素在悬停时真实地“变大”，而边框仍保持原始 1px 不变（因其未参与缩放，仅受盒模型影响）。
✅ 基础实现（推荐）
#pub_img {
border: 1px solid #555;
float: right;
width: 80px;
transition: width 0.4s ease-in-out;
}
#pub_img:hover {
width: 320px; /* ≈ 80px × 4，按需调整 */
}
#pub_img img {
width: 100%;
height: auto;
display: block;
}
#pub_img figcaption {
font-size: 0.2em;
border-top: 0.1px solid gray;
background-color: #fff;
text-align: justify;
margin-top: 4px;
padding: 2px 4px;
}
#pub_img:hover figcaption {
font-size: 0.8em; /* 同步放大文字，比例可调 */
font-weight: 600;
}? 提示：
img使用width: 100%配合父容器width变化即可自适应；无需设置height，保持宽高比。
✅ 进阶优化：延迟图注动画（更平滑体验）
若希望图片先放大、图注稍后淡入展开，可借助 CSS Grid 隐藏/显示控制：
#pub_img figcaption {
display: grid;
grid-template-rows: 0fr;
overflow: hidden;
transition: grid-template-rows 0.25s ease, font-size 0.25s ease;
transition-delay: 0.1s; /* 图注延迟 0.1s 开始变化 */
}
#pub_img:hover figcaption {
grid-template-rows: 1fr;
font-size: 0.8em;
}同时确保 HTML 中图注内容包裹在 <div> 内（防止文本溢出）：<pre class="brush:php;toolbar:false;"><figure id="pub_img">
<img src="https://picsum.photos/600/300" alt="示例图">
<figcaption><div>Lorem Ipsum</div></figcaption>
</figure></pre><h3>⚠️ 注意事项</h3>
<ul>
<li>
<strong>避免 <code>transform 与 width/height 混用：二者触发不同渲染层（transform 触发 GPU 加速，width 触发重排），混合使用可能导致动画卡顿或闪烁。
#pub_img 添加 max-width: 100% 并配合 box-sizing: border-box。#pub_img 添加 tabindex="0" 并补充 :focus 样式，确保键盘用户也能触发悬停效果（或改用 :focus-within）。通过这种「语义化尺寸驱动」的方式，你不仅能精准控制放大行为，还能保持边框、文字渲染质量与布局稳定性——这才是真正健壮、可维护的悬停交互方案。
