使底部为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>