我想在 X 和 Y 方向上按相同绝对数量的像素(不相同的比例)缩放元素,这样
newWidth = oldWidth + n
newHeight = oldHeight + n
其中 n
是尺寸增加的像素数,oldWidth
和 oldHeight
未知。
有没有办法在纯 CSS 中做到这一点?
最佳答案
您可以像这样使用 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);
}
关于css - 按相同数量的像素缩放 X 和 Y 中的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61138101/