Масштабирование элемента в X и Y на одинаковое количество пикселей

Question

Я бы хотел масштабировать элемент на одинаковое абсолютное количество пикселей (не одинаковое соотношение) в направлении X и Y, чтобы

newWidth = oldWidth + n
newHeight = oldHeight + n

, где n - количество пикселей увеличены в размерах, а oldWidth и oldHeight неизвестны.

Есть ли способ сделать это в чистом виде CSS? Спасибо!

Answer 1

Вы можете использовать CSS переменные, подобные этой:

CSS

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

Больше динамических c, но не рекомендуется:

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

AND ...

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

Answer 2

если размеры неизвестны, вы не можете использовать CSS, в этом случае, только javascript может сделать это. так что для этого в javascript сначала возьмите размер элемента, а затем динамически добавьте к нему что-нибудь.