我有两个嵌套的div。其中一个
是
transform: scale(0.5)
。
它们都是display: inline-block;
。
我需要发生的是,
外部
的宽度适应内部的宽度。这就是我所期望的,但事实并非如此。发生的情况是,外部
“认为”内部
具有其原始大小。
仅当内部
使用比1小的缩放因子(例如:
0.5
)时才会使外部的宽度适应内部的宽度,而不是
transform: scale(1)
。
我需要一种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>
有什么解决方法吗?