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

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 元素。在您的第一个 fiddle 中，图像的父级未定位。您可以这样补救:

.banner-wrap {
  position: relative;
}

最后，将 width 和 height 设置为 auto 会阻止图像缩放。将 height 保留为 auto，但将 width 更改为百分比:

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

您的图像现在应该都可以缩放。

Fiddle