在孩子轮换之后用孩子盖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()方法在转换后返回元素的height和width。

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

这是一个DEMO。

同样this other question有working solution可以做你想要的。

我希望它指出你正确的方向。

Answer 2

我不需要发表评论的声誉，因此我发布评论。我只是解决图像的大小选项。

假设您的图片有width = w和height = h。然后，如果外四边形的大小将具有大小

sqrt(w*w + h*h)

。请注意，如果内部图像不是正方形，则外部图像将不是正方形。