对齐两个对角线图像

Question

所以我得到了我正在处理的英雄布局的以下设计：

我已经制作了两个图像，如图所示，图像旁边的描述并对齐图像。我也查看了剪辑路径，但不幸的是它不支持 IE。所以我使用变换旋转选项将 div 旋转 -15 度，并将 div 内的图像旋转 15 度。但是，我遇到的问题是，当使用浏览器进行缩放时，两个必须保持对齐的图像之间会出现间隙。 （平板电脑和手机有另一种状态，但那是另一回事了）。

我创建了一个 codepen：http://codepen.io/adamk22/pen/zBLBAL，它的布局包括 css。浏览器缩放时如何保持两个图像对齐？我没有考虑到什么？

HTML：

<nav> Test Nav </nav>
<div class="container">
  <div class="hero-container-top">
    <div class="hero-img-box-container">
    <div class="hero-img-box-left">
      <div class="hero-img-box">
        <img class="hero-img" src="http://gyproc.dev/themes/custom/drywall/images/hero_img1.jpeg">
      </div>
    </div>
    </div>
    <div class="hero-text-box">
      <div class="hero-text-box-cta">
        <h1>Hello World</h1>
        <h3>Phasellus tempus. Quisque ut nisi. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Morbi mollis tellus ac sapien.</h3>
      </div>
    </div>
  </div>
  <div class="hero-container-bottom">
    <div class="hero-text-box">
      <div class="hero-text-box-cta">
        <h2> Hello world</h2>
        <h3>Phasellus tempus. Quisque ut nisi. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Morbi mollis tellus ac sapien.</h3>
      </div>
    </div>
    <div class="hero-img-box-container">
    <div class="hero-img-box-right">
      <div class="hero-img-box">
        <img class="hero-img" src="http://gyproc.dev/themes/custom/drywall/images/hero_img2.jpeg">
      </div>
    </div>
    </div>
  </div>
</div>

CSS：

body {
  background: white;
  font-family: 'Helvetica', sans-serif;
  display: flex;
  flex-direction: row;
}

h1 {
  font-size: 36px;
  line-height: 46px;
  font-weight: 100;
}

h2 {
  font-size: 24px;
  font-weight: 100;
}

h3 {
  font-size: 16px;
  line-height: 30px;
  font-weight: 100;
}

nav {
  flex: 0 0 235px;
  background: #0569C8;
  display: inline-block;
}

.container {
  flex: 1 0 auto;
  margin: 36px;
  overflow: hidden;
  background: white;
}

.hero-img-box-container {
  width: 60%;
}

.hero-container-top {
  display: flex;
  flex-direction: row;
  height: 767px;
  background: white;

  .hero-text-box {
    width: 40%;
    position: relative;
  }

  .hero-text-box-cta {
    position: absolute;
    top: 40%;
    left: 40%;
    transform: translateX(-50%) translateY(-50%);
  }
}

.hero-container-bottom {
  display: flex;
  flex-direction: row;
  position: relative;
  top: -256px;
  height: 751px;

  .hero-text-box {
    width: 40%;
    position: relative;
  }

  .hero-text-box-cta {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
  }
}

.hero-img-box-left {
  background: lightgrey;
  display: inline-block;
  height: 1023px;
  width: 100%;
  transform: rotate(15deg);
  transform-origin: top;
  position: relative;
  top: -165px;
  overflow: hidden;

  .hero-img-box {
    transform: rotate(-15deg);
    display: inline-block;
  }

  .hero-img {
    height: 765px;
    width: auto;
    position: relative;
    top: 140px;
    left: 10px;
  }
}

.hero-img-box-right {
  background: lightgrey;
  display: inline-block;
  height: 1000px;
  width: 100%;
  transform: rotate(15deg);
  transform-origin: top;
  position: relative;
  overflow: hidden;
  right: -21.8%;
  top: 0;

  .hero-img-box {
    transform: rotate(-15deg);
    display: inline-block;
  }

  .hero-img {
    height: 628px;
    width: auto;
    position: relative;
    top: 80px;
    left: -130px;
  }
}

Answer 1

我提供了一个可行的解决方案：http://codepen.io/adamk22/pen/dXqGbo/

CSS：

body {
  background: white;
  font-family: 'Helvetica', sans-serif;
  display: flex;
  flex-direction: row;
  width: 100%;
}

h1 {
  font-size: 36px;
  line-height: 46px;
  font-weight: 100;
}

h2 {
  font-size: 24px;
  font-weight: 100;
}

h3 {
  font-size: 16px;
  line-height: 30px;
  font-weight: 100;
}

nav {
  flex: 0 0 235px;
  background: #0569C8;
  display: inline-block;
}

.container {
  flex: 1 0 auto;
  margin: 36px;
  overflow: hidden;
  background: white;
}
.hero-container {
  background: white;
}

.hero-container__top {
  position: relative;
  height: auto;

  .hero-img {
    width: 100%;
  }

  .hero-text-box {
    width: 100%;
    height: 100%;
    position: relative;
  }

  .hero-text-box-cta {
    padding: 50px;
  }
}

.hero-container__bottom {
  position: relative;
  height: auto;

  .hero-img {
    width: 100%;
  }

  .hero-text-box {
    width: 100%;
  }

  .hero-text-box-cta {
    padding: 0 50px;
  }

  .hero-img-box-container {
  }
}

.hero-img {
  height: auto;
  position: relative;
}

.hero-img-box-container {
  width: 100%;
  position: relative;
  height: auto;
}

.hero-img-box {
  position: relative;
  height: 100%;
  width: 100%;
}

.hero-img-box__left {
  background: white;
  z-index: 10;
}

.hero-img-box__right {
  background: white;
}

@media screen and (min-width: 1230px) {

  .hero-container {
    flex: 1 0 auto;
    overflow: hidden;
    background: white;
  }

  .hero-container__top {
    overflow: hidden;
    position: relative;
    height: 0;
    padding-bottom: 120%;
    margin-top: -85px;

    .hero-img {
      width: 175%;
    }

    .hero-text-box {
      width: 40%;
      height: 100%;
      position: relative;
      margin-left: 60%;
    }

    .hero-text-box-cta {
      margin-top: 90%;
      transform: translateY(-50%);
      padding: 50px;
    }
  }

  .hero-container__bottom {
    position: relative;
    overflow: hidden;
    height: 0;
    padding-bottom: 50%;
    margin-top: -60%;

    .hero-img {
      width: 120%;
    }

    .hero-text-box {
      width: 40%;
      height: 100%;
    }

    .hero-text-box-cta {
      position: absolute;
      z-index: 20;
      top: 40%;
      width: 45%;
      padding: 0 50px;
    }

    .hero-img-box-container {
      left: 50%;
    }
  }

  .hero-img {
    left: 50%;
    height: auto;
    position: absolute;
    transform: rotate(-6deg) translateX(-50%);
  }

  .hero-img-box-container {
    width: 60%;
    position: absolute;
    top: 0;
    height: 100%;
  }

  .hero-img-box {
    position: absolute;
    display: inline-block;
    height: 2000px;
    width: 100%;
    overflow: hidden;
    top: 0;
    transform: rotate(6deg);
  }

  .hero-img-box__left {
    background: white;
    transform-origin: top;
    z-index: 10;
  }

  .hero-img-box__right {
    background: white;
    transform-origin: top;
  }

}

@media screen and (min-width: 1400px) {

  .hero-container__bottom {
    .hero-text-box-cta {
      top: 50%;
    }
  }

}