使圖像疊加響應

我已經創建了一個簡單的圖像疊加，將圖像與position:absolute放置在另一個圖像上。使圖像疊加響應

在調整窗口大小時，圖像疊加失去了初始位置，導致兩個圖像分離。我需要他們堅持到相同的位置，直到屏幕達到移動寬度。

以下是代碼&這裏是一個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%; 
    } 
}

來源

2017-09-13 Jordan Miguel

？ –

在同一個位置，不管屏幕寬度 –

在大圖像上還是在哪裏？ –

達到你想要什麼，我重新編碼爲desktop-image的background-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>

要定位圖像

來源

2017-09-13 03:09:35 Swellar

使圖像疊加響應

回答

相關問題