css - 将 X 和 Y 中的元素缩放相同数量的像素
问题描述
我想在 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);
}
推荐阅读
- php - Hubspot PHP API cURL 错误 60:无法识别对等方的证书颁发者
- angular - Ionic v4 单元测试错误:参数数组必须有参数
- javascript - 节点 UnhandledPromiseRejectionWarning: 错误: spawn EPERM
- typescript - 使用字符串枚举作为映射键
- c# - 类上的 EventHandler PercentComplete 以更新 ProgressBar
- ios - 如何在 SwiftUI 视图上使用组合
- azure - 如何在 azure powershell 中获取 1 天时间粒度的指标数据?
- doxygen - Doxygen:\xrefitem 命令无法按预期工作
- r - 创建黄土回归数据集的自定义函数
- java - IntelliJ & Gradle:测试模块/sourceSet 看不到主要资源