整列2対角の画像

Question

だから私は、私が働いている英雄のレイアウトのための次のような設計だ：私は限り説明と画像に示すように、2つの画像を作るようになった

を画像の横に配置し、画像を整列させる。私もclip-pathを調べましたが、残念ながらIEをサポートしていません。そこで私は変換回転オプションを使用してdivを-15度で回転させ、div内の画像を15度回転させました。しかし、私が持っている問題は、ブラウザで拡大縮小すると、整列したままにしなければならない2つの画像の間にギャップが現れることです。 （タブレットとモバイルには別の状態がありますが、これは別の話です）。

私はコードを作成しました：http://codepen.io/adamk22/pen/zBLBALは、CSSを含むレイアウトです。ブラウザの拡大/縮小時に2つの画像をどのように揃えるには？私は何を考慮に入れませんでしたか？

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%; 
    } 
    } 

} 

私はあなたの努力に感謝