我有一个太大的组件，我想缩小它。我可以通过缩放变换来做到这一点，但父容器不会缩小以适应。
在我的真实代码中，带有 SHRINK-ME 类的 div 实际上是一个 Angular 日历组件，但这简化了repo https://codepen.io/esoyke/pen/yvzLyg再现相同的效果。我不能只缩放包装父 div，因为我需要使用 Bootstrap 列网格类来容纳此示例中省略的对象。我在这里缺少一个简单的 CSS 属性吗？
.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 转换的一个关键部分：它们确实如此not影响文档流，仅影响视觉表示。因此，该元件的原始足迹将保留。我能够通过设置孩子和兄弟姐妹的宽度，然后手动移动兄弟姐妹以匹配孩子的顶角来克服这一问题。要适应小屏幕，还需要做更多的工作。
.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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
