css 放大缩小

/* 使用 CSS 实现元素的放大和缩小效果 */

/* 1. 使用 transform: scale() */
.element {
    transition: transform 0.3s ease;
}

.element:hover {
    transform: scale(1.2); /* 放大到原来的 1.2 倍 */
}

/* 2. 使用 CSS 变量控制缩放比例 */
:root {
    --scale-factor: 1.5; /* 默认缩放比例为 1.5 倍 */
}

.scale-element {
    transition: transform 0.3s ease;
}

.scale-element:hover {
    transform: scale(var(--scale-factor)); /* 使用 CSS 变量进行缩放 */
}

/* 3. 使用 max-width 和 min-width 控制图片缩放 */
img {
    max-width: 100%;
    height: auto;
    transition: transform 0.3s ease;
}

img:hover {
    transform: scale(0.8); /* 缩小到原来的 0.8 倍 */
}

解释说明：

• transform: scale()：scale() 函数用于缩放元素。参数可以是 scale(x) 或 scale(x, y)，其中 x 是水平缩放比例，y 是垂直缩放比例。如果只提供一个参数，则该值同时应用于水平和垂直方向。

• transition：用于定义过渡效果，使缩放变化更加平滑。transition: transform 0.3s ease 表示在 0.3 秒内平滑地应用缩放效果。

• CSS 变量：通过使用 var(--scale-factor)，可以在不同的地方复用缩放比例，并且方便修改。

• max-width 和 min-width：对于图片等元素，设置 max-width: 100% 确保图片不会超出其容器的宽度，同时保持宽高比。