html - 使用 CSS 缩放整个 HTML 元素，但没有子元素

Question

我想缩放整个元素以使其缩放(它是一个六边形 div)但我不希望它缩放内部的其他内容。

所以基本上 transform: scale(2); 工作正常，但里面的元素被缩放到(例如应该在 div 中的图像和文本。

下面是一些简单的例子:

.scaled {
  border: 1px solid #333;
  transform: scale(2);
}

<div class='scaled'>
  <span>non-scaled element</span>
</div>

无论如何我都希望元素有正常的比例

Answer 1

好吧，既然您没有提供任何代码，这在很大程度上取决于您想要实现的目标。

但原则是用你想要的值缩放你的六边形，并用那个值的倒数缩放内容。

这是一个比例为 4 的示例。

.container {
  padding: 5px;
  background: #ddd;
  transform: scale(4);
  position: relative;
  left: 0;
  margin: auto;
}

.content {
  text-align: center;
  background: #ccc;
  transform: scale(calc(1/4));
}

<div class="container">
  <div class="content">Lorem Ipsum</div>
</div>