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

Question

这是我第一次post访问这个网站，我会尽量把我的问题说清楚。如果不清楚，我会尽力解释。

我正在用 2 张图片制作响应式设计，稍后我会添加更多图片。

其中一张图片是头部的一部分，需要始终位于底部。另一部分需要始终在最前面。这需要响应。

我做了一些研究，发现最好的方法是使用 %。我将 post 我尝试的一些代码。

下面的代码只是一种技术，可以用来实现我想要的东西。

    .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

我已经使用 parent 容器的相对宽度和绝对 position/horizontal 转换来为您提供所需的外观。

注意：我通过给容器 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>

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

Make a responsive image with bottom 0 and make other responsive images depend on that image

html

css

responsive-design

responsive