【问题标题】：Scale element in X and Y by the same amount of pixels将 X 和 Y 中的元素缩放相同数量的像素
【发布时间】：2020-07-23 01:45:23
【问题描述】：

我想在 X 和 Y 方向上以相同的像素绝对数量（不是相同的比率）缩放元素，这样

newWidth = oldWidth + n
newHeight = oldHeight + n

其中n 是大小增加的像素数，oldWidth 和oldHeight 是未知的。

有没有办法在纯 CSS 中做到这一点？

【问题讨论】：

标签： css css-transforms

【解决方案1】：

如果尺寸未知，则不能使用 CSS。在这种情况下，只有 JavaScript 可以做到这一点。

要在 JavaScript 中做到这一点，首先获取元素的尺寸，然后动态地添加或减去一个值。

【讨论】：

【解决方案2】：

您可以像这样使用 CSS 变量：

CSS

:root {
    --n: 100px
}
.sample {
    width: calc(300px + var(--n));
    height: calc(200px + var(--n));
}

更动态但不推荐：

:root {
    --n: 100px;
    --width: 100px;
    --height: 100px;
}
.sample {
    width: calc(var(--width) + var(--n));
    height: calc(var(--height) + var(--n));
}

和...

:root {
    --n: 100px;
    --width: 100px;
    --height: 100px;
    --new-width: calc(var(--n) + var(--width));
    --new-height: calc(var(--n) + var(--height));
}
.sample {
    width: var(--new-width);
    height: var(--new-height);
}

【讨论】：

不幸的是元素的尺寸是未知的，因此这不是一个解决方案。很抱歉没有在帖子中提及。
此外，这实际上并没有缩放元素，因为它的内容保持相同的大小。
如果宽度和高度不相等，这会将元素在 x 和 y 中缩放不同数量的像素。