html - 让图像居中填充整个旋转的 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 的正方形的两个 Angular 之间的距离是使用毕达哥拉斯计算的，

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

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

所以我将宽度+高度设置为等于该值，然后自己手动调整图像。

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