制作一个底部为 0 的响应式图像，并使其他响应式图像依赖于该图像答案

【问题标题】：Make a responsive image with bottom 0 and make other responsive images depend on that image制作一个底部为 0 的响应式图像，并使其他响应式图像依赖于该图像
【发布时间】：2016-10-12 15:00:34
【问题描述】：

这是我在这个网站上的第一篇文章，我会尽量让我的问题尽可能清楚。如果不清楚，我会尽力解释。

我正在使用 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>

【问题讨论】：

请发布您在使用上述代码时遇到的问题
当你说响应式时，你的意思是你想让盒子垂直增长，这样你就可以看到整个图像，顶部是完整的头部，底部是身体？还是您希望图像缩小以适合 div？
如果你不介意 flex 我可以用 flex 和 order 回答 :)
@Ivarkentje 我注意到该示例有两个不同的图像。一个是头顶，另一个是身体的其余部分。但是你有两个相同的图像顶部和底部。这是故意的还是你的意思是有两个图像：头部和身体？

标签： html css responsive-design responsive

【解决方案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>

【讨论】：