イメージを別のイメージと重複する

Question

1. 最初のイメージは、その複数のブレンドモードとその色（100％x 1172px）のバックグラウンドとなります。
2. このコンテナの最下部には、バックグラウンドが同じでブレンドモードのないブロック（50％x 520ピクセル）があります。
3. What exactly I'm trying to reach。

- アイデアは、少なくとも2つ以上のブレークポイントの幅を1つのイメージとして保持することです。

jsfiddle jsfiddle (UPD)

UPD：

HTML & CSSマークアップ

.main-container { 
 
    display: flex; 
 
    height: 1172px; 
 
    width: 100%; 
 
    position: relative; 
 
} 
 

 
.main__fluid { 
 
    display: flex; 
 
    flex: 1; 
 
} 
 

 
.main__fluid--image { 
 
    background: url(https://i.imgur.com/eRnGawp.jpg); 
 
    background-size: cover; 
 
    background-repeat: no-repeat; 
 
    position: relative; 
 
} 
 

 
.main__inner-block { 
 
    display: flex; 
 
    align-items: flex-end; 
 
    position: relative; 
 
    height: 520px; 
 
    width: 50%; 
 
    margin-top: auto; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    margin-bottom: 3rem; 
 
    border-radius: 10px; 
 
    box-shadow: 1px 2px 4px 0px rgba(0, 0, 0, 0.28); 
 
    z-index: 9; 
 
} 
 

 
.main__inner-block--image-mask { 
 
    overflow: hidden; 
 
} 
 

 
.image { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    left: 0; 
 
    bottom: 0; 
 
    background: url(https://i.imgur.com/Piu55zF.jpg); 
 
    background-repeat: no-repeat; 
 
    background-position: top -36rem center; 
 
    max-width: 100%: 
 
} 
 

 
.main__navigation { 
 
    height: 80px; 
 
    width: 100%; 
 
    background-color: #5ec8c3; 
 
    position: relative; 
 
} 
 

 
.footer { 
 
    background-color: #1f5c71; 
 
    height: 91px; 
 
    position: relative; 
 
    top: -5rem; 
 
}

<div class="main-container"> 
 
    <div class="main__fluid main__fluid--image"> 
 
    <div class="main__inner-block main__inner-block--image-mask"> 
 
     <div class="image"></div> 
 
    </div> 
 
    </div> 
 
</div>

現在、このいずれかを持っている、やや部分的な解決策を見つけた

私は（モードをブレンドせずにある）小さい画像

ため と子実際に私だけが削除財産（ブレンドモードである）大きな画像ため親を割り当てますbackground-size親から/またはそのスタイルにbackground-size: auto autoを追加すると、もちろん、Y軸のサイズ変更が防止されます。その後、子供の調整を行いました。親〜background-positionと最後のものは、background-position: centerを中心に整列されています。 jsfiddleをこれらの変更で更新しました。

Answer 1

このCSSブロックをお試しください。両方の画像を同じ位置に揃えます。

.main-container { 
    display: flex; 
    height: 1172px; 
    width: 100%; 
    position: relative; 
} 

.main__fluid { 
    display: flex; 
    flex: 1; 
} 

.main__fluid--image { 
    background: url(https://i.imgur.com/Piu55zF.jpg); 
    background-size: cover; 
    position: relative; 
    background-color: #51c8c4; 
    background-blend-mode: multiply; 
    background-repeat: no-repeat; 
    background-position: top -27rem center; 


} 

.main__inner-block { 
    position: relative; 
    height: 45%; 
    width: 80%; 
    margin-top: 20.5%; 
    margin-left: auto; 
    margin-right: auto; 
    border-radius: 10px; 
    box-shadow: 1px 2px 1px 0px rgba(0, 0, 0, 0.28) 
} 

.main__inner-block--image-mask { 
    overflow: hidden; 
} 

.image { 
    position: relative; 
    width: 100%; 
    height: 100%; 
    background: url(https://i.imgur.com/Piu55zF.jpg); 
    background-repeat: no-repeat; 
    background-position: top -45rem center; 
}