将X和Y中的元素缩放相同数量的像素

Question

我想在X和Y方向上以相同的绝对像素量(而不是相同的比例)缩放一个元素，这样就可以

newWidth = oldWidth + n
newHeight = oldHeight + n

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

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

Answer 1

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

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

Answer 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);
}