将可缩放图像定位在其他图像之上

Question

我正在处理一个项目，我想将一张图片放在另一张图片之上。我已经能够弄清楚如何做到这一点，但是一旦我尝试将图像居中并使其可扩展，它将不再以我想要的方式显示。

我希望黄色图像（横幅）显示在主图片（top-pic）的顶部。我希望横幅相对于顶部图片居中，距顶部图片底部有 60 像素的边距。有谁知道如何定位它，同时允许两张图片都可以缩放？

My JSFiddle

Updated JSFiddle but still not working

我的 CSS：

.top-pic img {
  max-width: 100%;
  height: auto;
  min-height: 35%;
  width: auto\9; /* ie8 */
}

.banner-wrap {
  width: 100%;  
  position: absolute;
}

.banner {
  width: 796px;
  margin: 0px auto;
}

.banner img {
  position: absolute;
  bottom: 59px;
  width: auto;
  height: auto;
}

我的 HTML：

<section>
  <div align="center" style="background-color:#EAC40D;">
    <div class="top-pic">
      <div>
        <img src="http://www.affordablehomecare.org/Templates/assets/images/slider/1.jpg">
      </div>
    </div>
  </div>
  <div class="banner-wrap">
    <div class="banner">
      <img class="banner" src="assets/images/banner_title_home.png">
    </div>
  </div>
</section>

Answer 1

在您的first fiddle 中，您正在基于banner 类设置img 的样式：

.banner img {
  position: absolute;
  bottom: 59px;
  width: auto;
  height: auto;
}

但是，您没有该类的元素，因此样式被忽略。

改成这样：

.banner-wrap img {
  ...
}

绝对定位元素相对于任何定位的父元素，如果没有定位父元素，则为body 元素。在您的第一个小提琴中，图像的父级是 not 定位的。你可以这样补救：

.banner-wrap {
  position: relative;
}

最后，将width 和height 设置为自动会阻止您的图像可扩展。将height 保留为自动，但将width 更改为百分比：

.banner img {
  position: absolute;
  bottom: 59px;
  width: 100%;
  height: auto;
}

您的图像现在应该都可以扩展了。

Fiddle

Answer 2

删除包装 div，只使用 img 元素。

<section>
    <div align="center" style="background-color:#EAC40D;">
        <div class="top-pic">
            <div><img src="http://www.affordablehomecare.org/Templates/assets/images/slider/1.jpg"></div>                
        </div>
        <img src="http://www.affordablehomecare.org/Templates/assets/images/banner_title_home.png">
    </div>         
</section>

并使用这个 css：

.top-pic img {
    max-width: 100%;
    height: auto;
    min-height:35%;
    width: auto\9; /* ie8 */}
 img{
    position:absolute;
    bottom:59px;
    width: auto;
    height: auto;}

我已经修改了您的 JSFiddle 以使其正常工作。在这里：

http://jsfiddle.net/7wry4w0p/5/