这是我在本网站上的第一篇文章，我将尽可能清楚地提出我的问题。如果不清楚，我会尽力解释。
我正在使用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>
答案 0 :(得分：0)
我使用了相对宽度和父容器的绝对位置/水平变换来为您提供所需的外观。
注意：我通过为容器提供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>