画像のオーバーレイを反応的にする

Question

position:absoluteの画像を別の画像に重ねることで、簡単な画像のオーバーレイを作成しました。

ウィンドウのサイズを変更すると、イメージオーバーレイの初期位置が失われ、2つのイメージが別々になります。私は彼らが画面がモバイルの幅に達するまで同じ位置に固執する必要があります。

以下はコード&です。codepenです。

HTML -

<div class="projects"> 
    <div id="images" class="stella"> 
    <div class="desktop-image"> 
     <img src="https:http://i3.mirror.co.uk/incoming/article10811001.ece/ALTERNATES/s1200/Arsenal-player-Alexandre-Lacazette-takes.jpg"> 
    </div> 
    <div class="mobile-image-stella"> 
     <img src="https:http://i3.mirror.co.uk/incoming/article10811001.ece/ALTERNATES/s1200/Arsenal-player-Alexandre-Lacazette-takes.jpg"> 
    </div> 
    </div> 
    <div id="images" class="scf"> 
    <div class="desktop-image"> 
     <img src="https:http://i3.mirror.co.uk/incoming/article10811001.ece/ALTERNATES/s1200/Arsenal-player-Alexandre-Lacazette-takes.jpg"> 
    </div> 
    </div> 
    <div id="images" class="misma"> 
    <div class="desktop-image"> 
     <img src="http://i3.mirror.co.uk/incoming/article10811001.ece/ALTERNATES/s1200/Arsenal-player-Alexandre-Lacazette-takes.jpg"> 
    </div> 
    <div class="mobile-image-misma"> 
     <img src="https:http://i3.mirror.co.uk/incoming/article10811001.ece/ALTERNATES/s1200/Arsenal-player-Alexandre-Lacazette-takes.jpg"> 
    </div> 
    </div> 
</div> 

CSS -

.projects { 
    width: 100; 
    margin: 0 auto; 
} 

#images { 
    text-align: center; 
    padding-bottom: 230px; 
} 

#images img { 
    width: 50%; 
    height: 50%; 
    border: 5px solid #0f0f10; 
} 

.mobile-image-stella { 
    width: 30%; 
    position: absolute; 
    top: 112%; 
    left: 22%; 
} 

.mobile-image-misma { 
    width: 30%; 
    position: absolute; 
    top: 332%; 
    left: 22%; 
} 

そして、ここでは、私はあなたが望むものを達成するために、問題

@media (min-width: 900px) and (max-width: 1428px) { 
    .mobile-image-stella { 
    width: 30%; 
    position: absolute; 
    top: 112%; 
    left: 22%; 
    } 

    .mobile-image-misma { 
    width: 30%; 
    position: absolute; 
    top: 332%; 
    left: 22%; 
    } 
} 

Answer 1

を固定するためにしようとしたメディアクエリーで、私はbackground-imageがdesktop-imageになるように大きな画像を再コーディングしました。私はposition:relativeを適切に使用してください。小さなイメージを大きなイメージの子にし、適切な配置にposition:absoluteを使用して配置することが問題になります。

これにより、ブラウザのサイズを変更しても、画像の位置が「静的」になります。私は何かを誤解している場合、それをコメントし、私はそれに応じて、あなたが画像を配置したい

.desktop-image { 
 
    background-image: url('https://images.cdn.fourfourtwo.com/sites/fourfourtwo.com/files/styles/image_landscape/public/lacazette-cropped_1du1hebls4tv11c8ef7kdpyok1.jpg?itok=Lh3EAtTj&c=87b6d99828d88c1b8ffe17a08d24fc7d'); 
 
    background-size: cover; 
 
    background-position: center; 
 
    width: 300px; 
 
    height: 300px; 
 
    margin: 0 auto; 
 
    border: 5px solid #0f0f10; 
 
    position: relative; 
 
} 
 

 
.desktop-image>img { 
 
    width: 30%; 
 
    border: 5px solid #0f0f10; 
 
    position: absolute; 
 
    top: 100%; 
 
    left: 10%; 
 
    transform: translate(0, -50%); 
 
}

<div class="images"> 
 
    <div class="desktop-image"> 
 
    <img class="mobile-image-stella" src="https://images.cdn.fourfourtwo.com/sites/fourfourtwo.com/files/styles/image_landscape/public/lacazette-cropped_1du1hebls4tv11c8ef7kdpyok1.jpg?itok=Lh3EAtTj&c=87b6d99828d88c1b8ffe17a08d24fc7d"> 
 
    </div> 
 
</div>