如何为Div(Card)添加悬停时动态放大宽高的效果（无需媒体查询）

原代码失效原因 #

你的代码无法生效，核心问题有两个：

1. .card 未设置初始宽高，CSS过渡（transition）需要基于初始值计算动画逻辑，无初始值则无法触发过渡效果。
2. 固定宽高（260px/293px）在响应式场景下需逐个媒体查询调整，不符合灵活适配的需求。

方案1：使用 transform: scale()（推荐） #

这是适配响应式场景的最优方案，无需设置固定宽高，基于元素自身尺寸缩放，且不影响页面布局。

.card {
  /* 基础样式，宽高可设为固定值、百分比或自适应 */
  width: 200px;
  height: 250px;
  background-color: #fff;
  border: 1px solid #eee;
  /* 将过渡效果放在初始样式中，避免hover时才加载导致卡顿 */
  transition: all 0.5s ease;
}

.card:hover {
  background-color: #ffd700;
  /* scale(1.3) 表示放大至原尺寸的1.3倍，数值可按需调整 */
  transform: scale(1.3);
}

<div class="card">
  hello
</div>

优势：

• 自动适配所有屏幕尺寸，无需媒体查询调整缩放规则。
• 缩放时不改变元素在文档流中的占位，不会挤压其他元素。

方案2：使用相对单位调整宽高（适合需要改变元素占位的场景） #

如果需要hover时改变元素的实际占位尺寸，可使用百分比、vw等相对单位结合max-width/max-height实现响应式：

.card {
  width: 80%;
  max-width: 200px;
  height: auto;
  padding: 20px;
  background-color: #fff;
  border: 1px solid #eee;
  transition: all 0.5s ease;
}

.card:hover {
  background-color: #ffd700;
  width: 90%;
  max-width: 260px;
}

优势：

• 宽高基于父容器或视口自适应，无需针对不同断点写媒体查询。
• 可通过max-width/max-height限制最大缩放尺寸，避免元素过大。

注意事项 #

• 务必将transition属性放在元素的初始样式中，而非hover状态内，否则无法触发平滑过渡。
• 使用scale缩放时，若元素超出父容器，可给父容器添加overflow: hidden或调整缩放比例。

内容的提问来源于stack exchange，提问作者Front-G