使底部爲0的響應圖像，並使其他響應的圖像依賴於該圖像

Question

這是我在本網站上的第一篇文章，我會盡量讓我的問題儘可能清晰。如果不清楚，我會盡我所能地盡力解釋。

我使用2張圖片進行響應式設計，稍後我會添加更多。

其中一個圖像是頭部的一部分，需要總是在底部。另一部分需要始終位於頂端。這需要有響應。

我做了一些研究，發現最好的方法是使用％。我會發布一些我的嘗試代碼。

下面的代碼只是一種技術，可以用來實現我想要的東西。

.wrapper { 
 

 
     border: 2px solid #000; 
 

 
     position: absolute; 
 

 
     bottom: 0; 
 

 
     width: 90%; 
 

 
     margin: 0; 
 

 
    } 
 

 
    .outer { 
 

 
     position: relative; 
 

 
     width: 40%; 
 

 
     height: 120px; 
 

 
     margin: 0 auto; 
 

 
     border: 2px solid #c00; 
 

 
     overflow: hidden; 
 

 
    } 
 

 
    .inner { 
 

 
     position: absolute; 
 

 
     bottom: 0; 
 

 
     margin: 0 25%; 
 

 
     background-color: #00c; 
 

 
    } 
 

 
    .inner-onder { 
 

 
     position: absolute; 
 

 
     text-align: center; 
 

 
     top: 0; 
 

 
     background-color: #00c; 
 

 
     margin: 0 25%; 
 

 
    } 
 

 
    img { 
 

 
     width: 50%; 
 

 
     height: auto 
 

 
    }

<div class="wrapper"> 
 
    <div class="outer"> 
 
    <img class="inner " src="http://img.india-forums.com/images/600x0/57963-still-image-of-pooja-gaur.jpg" /> 
 
    </div> 
 
    <div class="outer"> 
 
    <img class="inner-onder " src="http://img.india-forums.com/images/600x0/57963-still-image-of-pooja-gaur.jpg" /> 
 
    </div> 
 
</div>

Answer 1

我已經使用相對寬度和絕對位置/水平的父容器的變換給你你想要的效果。

注：我通過給容器照顧了他們的容器中的圖像下方創建的差距line-height: 0;

.container { 
 
    width: 50%; 
 
    border: 1px solid red; 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
} 
 
.head, .body { 
 
    text-align: center; 
 
    line-height: 0; 
 
} 
 
img { 
 
    width: 100%; 
 
} 
 
/* in the case of the images I was working with I had to add the styles below because the head image was enlarged after being sliced from the body image. If you don't resize the head when you split the picture you won't need the extra styling */ 
 
.head img { 
 
    width: 38%; 
 
    transform: translateX(-14%) 
 
}

<div class="container"> 
 
    <div class="head"><img src="http://c7ee2562.ngrok.io/portfolio/img/head.png" alt="" /></div> 
 
    <div class="body"><img src="http://c7ee2562.ngrok.io/portfolio/img/thinkingn.png" alt="" /></div> 
 
</div>