以相同的像素值在X和Y轴上缩放元素

Question

我想将一个元素按相同的像素绝对值（而不是相同比例）在X和Y方向上进行缩放，使得：

newWidth = oldWidth + n
newHeight = oldHeight + n

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

有没有使用纯CSS的方法可以实现这个目标？

- malte-v

Answer 1

您可以像这样使用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));
}

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

- Kourosh Neyestani

---

很不幸，该元素的尺寸未知，因此这不是一个解决方案。很抱歉在帖子中没有提到这一点。 - malte-v

此外，这并不实际缩放元素，因为其内容保持相同大小。 - malte-v

如果宽度和高度不相等，那么这将按不同的像素量在x和y方向上缩放元素。 - malte-v

Answer 2

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

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

- Abdelmonaem Shahat

Answer 3

transform: scaleY(calc(100% - calc(calc(8 * 100%) / 48))) scaleX(calc(100% - calc(calc(8 * 100%) / 152)));

.parent {
  position: relative;
  width: 152px;
  height: 48px;  
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #444;
  cursor: pointer;
}

.parent:hover .children {
  /* scale x,y 16px */
  transform: scaleY(calc(100% - calc(calc(16 * 100%) / 48))) scaleX(calc(100% - calc(calc(16 * 100%) / 152)));
}

.children {
  width: 100%;
  height: 100%;
  border-radius: 4px;
  background-color: #888;  
  transition: transform 200ms linear;
  /* scale x,y 1px */
  transform: scaleY(calc(100% - calc(calc(1 * 100%) / 48))) scaleX(calc(100% - calc(calc(1 * 100%) / 152)));
}

.text {
  top: 0;
  left: 0;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

<div class="parent">
  <div class="children"></div>
  <div class="text">Hover me</div>
</div>

- Valery Kiseliou