让图像在居中时填充整个旋转的div

Question

目标：让图像填充包含div，但完全居中。

Codepen示例：http://codepen.io/pdnellius/pen/bcijD

截图

HTML：

<section class="intro">
  <div class="diamond_wrapper">
     <img class="img_hero" src="http://placehold.it/1000x1000" alt="my image">
  </div>
</section>

CSS：

body, html {
    top: 0;
    left: 0;
    margin: 0;
    background: tomato;
}
.intro {
    background: tomato;
    height: 60em;
}
.diamond_wrapper {
    transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    background: green;
    height: 30em;
    width: 30em;
    margin: 0 auto;
  margin-top: 7em;
  overflow: hidden;
    z-index: 200 !important;
}
.img_hero {
    margin: 0 auto;
    width: 30em;
  transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    z-index: 0;
}

Answer 1

我不会撒谎并且告诉你这是在中心....我必须手动调整它以使它看起来像我的中心。我确定有办法，但我不知道该怎么做....无论如何，距离为30的正方形的两个角之间的距离是用毕达哥拉斯计算的，

a^2 + b^2 = c^2其中C是斜边，A和B是其他边。

30^2 * 30^2 = sqrRt(ans) = 42.43

所以我使宽度+高度等于那个，然后自己手动调整图像。

http://codepen.io/Leth0_/pen/Lfhbi

Answer 2

艰难的一个。这可能是一个开始：

http://codepen.io/anon/pen/Aucvs

.img_hero {
margin: 0 auto;
height:auto;
transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
z-index: 0;
position:absolute;
width: 200%;
top:-50%;
left:-50%;
}