html - 仅限 CSS - 旋转和调整容器高度

Question

我正在寻找一种仅在 CSS 中调整容器高度的方法 <div>每当它的一个 child 被旋转时标记。我非常清楚(并且可以完全实现)使用 JavaScript 的解决方案，但我希望找到 CSS 解决方案。

这个 fiddle 展示了我的困惑:http://jsfiddle.net/spryno724/yX56u/

HTML:

<div class="container">
    <p>Test</p>
    <img class="rotate" src="https://tse1.mm.bing.net/th?id=HN.608054218431465781&pid=1.7" />
</div>

CSS:

.container {
    border: 1px solid red;
    overflow: auto;
    position: relative;
    width: 100%;
}

.rotate {
    -moz-transform: rotateZ(45deg);
    -ms-transform: rotateZ(45deg);
    -o-transform: rotateZ(45deg);
    -webkit-transform: rotateZ(45deg);
    transform: rotateZ(45deg);

    position: absolute;
    top: 160px;
}

有没有人知道如何让容器自动调整高度而不考虑旋转对象的自然高度或旋转量？

Answer 1

个人认为用纯css是做不到的。要计算容器的高度，您需要执行以下操作:

   heightContainer = sin(angleImg) * (widthImg + heightImg)

这是纯 CSS 无法做到的。您可以在 css 中使用 Javascript，或使用 Less 之类的东西来生成代码。但是将 js 放在你的 css 中是很糟糕的(这就是你拥有 js 文件的目的)。 Less 解决方案需要设置 Angular 和尺寸的值，如果这些值是固定的，您也可以将容器高度也固定...

除了计算高度，我看不到任何可行的解决方案。再次使 img relative 无济于事，因为不会考虑转换。我试着玩弄 this related question 的答案(这很聪明)，但我认为它不适用于您的情况。

所以 imo:不，它不能用纯 css 来完成但我很乐意看到有人证明我错了!