对孩子的CSS缩放转换不影响父母的大小 [英] CSS Scale transform on child not affecting parent size

问题描述

我的组件太大，我想缩小它.我可以通过缩放转换来做到这一点，但是父容器不会缩小以适合它.

I have a component that is too large and I want to shrink it down. I'm able to do so with a scale transform, but the parent container doesn't shrink to fit.

在我的真实代码中，带有SHRINK-ME类的div实际上是一个Angular日历组件，但这简化了 repo 会产生相同的效果.我不能仅缩放包装的父div，因为我需要使用Bootstrap列网格类来容纳此示例中省略的对象.我在这里缺少简单的CSS属性吗?

In my real code, the div with the SHRINK-ME class is actually an Angular calendar component, but this simplified repo reproduces the same effect. I can't just scale the wrapping parent div as I need to use the Bootstrap column grid classes to accommodate objects omitted from this example. Am I missing a simple CSS property here?

.parent {
  background-color: green;
}

.parent .child-object {
  height: 10em;
  background-color: red;
}

.sibling {
  background-color: yellow;
}

.SHRINK-ME {
  transform: scale(.80) translate(-12.5%, -12.5%);
}

<div class='row no-gutters'>
  <div class='parent col-vs-12 col-sm-6'>
    <div class='child-object SHRINK-ME'>CHILD</div>
  </div>
  <div class='sibling col-vs-12 col-sm-6'>SIBLING</div>
</div>

我的代码有无转换:

.parent {
  background-color: green;
  width: 40%;
}

.parent .child-object {
  height: 10em;
  background-color: red;
}

.sibling {
  background-color: yellow;
}

.SHRINK-ME {
  transform: scale(.80) translate(-12.5%, -12.5%);
}

<div class='row no-gutters'>
  <div class='parent col-vs-12 col-sm-6'>
    <div class='child-object'>CHILD</div>
  </div>
  <div class='sibling col-vs-12 col-sm-6'>SIBLING</div>
</div>

<br> Don't want to see the green parent div, want it to shrink as child is scaled down..

<div class='row no-gutters'>
  <div class='parent col-vs-12 col-sm-6'>
    <div class='child-object SHRINK-ME'>CHILD</div>
  </div>
  <div class='sibling col-vs-12 col-sm-6'>SIBLING</div>
</div>

推荐答案

我错过了CSS转换的关键部分:它们不不影响文档流，仅影响视觉表示.因此，该元件的原始覆盖区将保留.通过设置孩子和兄弟姐妹的宽度，然后手动将兄弟姐妹移到与孩子的上角相匹配的位置，可以克服这种情况.要适应小屏幕，还需要做更多的工作.

I missed a crucial part of CSS transforms: they do not affect Document flow, only the visual representation. Thus the original footprint of the element would remain. I was able to overcome by setting widths on the child and sibling, then manually shifting the sibling over to match the top corner of the child. More work would be needed for it to adjust to small screens.

.parent {
  background-color: green;
}

.parent .child-object {
  width: 10em;
  background-color: red;
}

.sibling {
  color: white;
  width: 20em;
  background-color: blue;
}

.SHRINK-ME {
  transform: scale(.80);
}

.TRANSLATE-ME {
  transform: translate(-5%, 10%);
}

<div class='row'>
  <div class='parent SHRINK-ME'>
    <div class='child-object '>CHILD</div>
  </div>
  <div class='sibling TRANSLATE-ME'>SIBLING</div>
</div>

这篇关于对孩子的CSS缩放转换不影响父母的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！