变换比例保持缩放元素周围的原始空间

Question

我有两个嵌套的 div。 inner one 是 transform: scale(0.5) 。

两者都是 display: inline-block; 。

我需要做的是 outer div 使其宽度适合内部宽度。那是我应该发生但没有发生的事情。发生的是外部 div “认为”内部 div 具有它的原始大小。

仅当内部 div 为 transform: scale(1) 但不使用小于 1 的比例因子时，外部 div 才使其宽度适合内部宽度，例如： 0.5 （参见示例）。

我需要一些方法来通过 CSS 以优雅的方式实现这一点。

 .red {
  background-color: #f00;
}

.green {
  background-color: #0f0;
}

.box_1,
.box_2 {
  display: inline-block;
}

.box_1 {
  width: 300px;
  height: 300px;
  transform: scale(0.5);
  transform-origin: left top;
}

 <div class="box_2 green">
  <div class="box_1 red">Hello World</div>
</div>

关于如何解决这个问题的任何想法？

原文由 nightclub 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

一种残酷的方法是实际上减少元素所需的空间。

您的示例显示了已知的宽度和高度，因此它很容易。否则你需要一个javascript方法。

 .box_1 {
    width:  300px;
    height: 300px;
    transform: scale(0.5);
    transform-origin: left top;
  margin-bottom:-150px;
  margin-right:-150px;
}

https://jsfiddle.net/0bc4sxk3/1/

扩大规模将意味着正利润率。

转换仅发生在屏幕上，元素仍然使用文档流中所需的初始空间和位置。

原文由 G-Cyrillus 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我认为一种解决方案是将按比例缩小的元素包装到一个元素中 overflow: hidden 。包装器应具有缩小内容的确切尺寸。

这个解决方案最适合我。

 .wrapper {
  width: 150px;
  height: 150px;
  overflow: hidden;
}

.content {
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  height: 300px;
  transform: scale(0.5);
  transform-origin: left top;
}

.box_1,
.box_2 {
  display: inline-block;
}

.red {
  background-color: #f00;
}

.green {
  background-color: #0f0;
}

 <div class="box_2 green">
  <div class="box_1 red">Hello World</div>
</div>

原文由 Adrian B 发布，翻译遵循 CC BY-SA 4.0 许可协议