Question

我正在制作一个项目，我希望将一个图像放在另一个图像的顶部。我已经能够弄清楚如何做到这一点但是当我试图使图像居中并使其可扩展时它将不再显示我想要的方式。

我希望黄色图像（横幅）显示在主图片（top-pic）的顶部。我希望横幅相对于顶部图片居中，从顶部图片的底部开始有60px的边距。有谁知道如何定位它，同时允许两个图片可扩展？

我的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中，您根据img课程设置banner样式：

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

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

将其更改为：

.banner-wrap img {
  ...
}

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

.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/

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

2 个答案:

Fiddle