Question

我想缩放整个元素以使其缩放（它是一个六边形div）但我不希望它扩展其他内容。

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

这是一个简单的例子：

＆＃13;

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

＆＃13;

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

＆＃13;

无论什么

，我希望元素具有正常的比例

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>

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

1 个答案: