對齊兩個對角線圖像

所以我得到了一個英雄的佈局下面的設計，我的工作：對齊兩個對角線圖像

我得到儘可能與描述的圖像如圖所示使兩個圖像在圖像旁邊並對齊圖像。我也看着剪輯路徑，但不幸的是它不支持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; 
    } 
}

來源

2016-07-29 adamk22

我很欣賞你的努力，但也許你應該考慮嘗試SVG。 – GolezTrol

@golezTrol沒有svg掩碼使用剪輯路徑，反過來IE不支持？ – adamk22

我會用僞元素來解決這個問題。不旋轉的div但在此之前僞元素旋轉那裏使用z-index屬性 –

我提供了一個可行的解決方案：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%; 
    } 
    } 

}

來源

2016-08-19 11:48:58 adamk22

對齊兩個對角線圖像

回答

相關問題