html - 在 child 旋转后用 child 覆盖 div

Question

我有一个包含图像的 div，我想旋转图像。旋转后图像应覆盖父 div，溢出将被隐藏。我有两张我得到的和我想要的图片(缺乏声誉不允许我嵌入图片):

.parent {
    position:relative;
    display:inline-block;
    width:100%;
    max-width:480px;
    overflow:hidden;
}

.background{
    width:100%;
    height:auto;
}

.grafic {
    position:absolute;
    z-index:1;
    top:0;
    left:0;
    width:100%;
    max-height:360px;
    height:auto;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

<div class="parent">
    <img class="grafic" alt="" src="img.gif"
    <img class="background" src="gfx/missingpicture.gif">
</div>

如您所见，我可以旋转图像，但图像没有完全覆盖父 div。我找不到任何关于这个确切问题的信息。

一些想法: 可以使用 JQuery 来计算覆盖父 div 所需的高度/宽度，但如果可以使用纯 CSS 解决方案，我讨厌使用 JS/JQuery(我可以自己做一个 JS 解决方案，但我仍然不喜欢 CSS)。 我使用 PHP(我会知道程度)，所以可以完成预先计算的东西，但父 div 在较小的屏幕上变得更小。固定宽度会有点糟糕..

Answer 1

我想不出纯 CSS 的解决方案，所以这里有一些我以前用过的 JS。

您无需自己进行数学运算即可获得转换对象的尺寸。

相反，您可以使用 Element.getBoundingClientRect()返回转换后元素的高度和宽度的方法。

获得尺寸后，调整父尺寸以适合旋转后的图像应该很容易。

这是一个 DEMO .

还有 this other question有working solution哪个做你想要的。

我希望它能为您指明正确的方向。