Question

我希望这个图像（较小的 - 灰色的）在调整窗口大小时保持在div（草甸图像）的底部。我尝试使用属性的自动值，但我猜它有与定位有关，无法弄清楚究竟是什么。可能有什么想法？谢谢你的吨！

Codepen：http://codepen.io/anon/pen/zoEYgP

.images {
  background: url("http://kingofwallpapers.com/meadow/meadow-008.jpg");
  background-size: cover;
  height: 780px;
  /*position: relative;*/

}
.smaller {
  text-align: center;
}
.smaller img {
  position: relative;
  bottom: -280px;
}
@media screen and(max-width: 768px) {
  .images {
    height: auto;
    /*position: relative;*/
  }
  .smaller img {
    width: 80%;
    /*height: auto;*/
    /*margin-bottom: 0px;*/
  }
}

<section class="images">
  <div class="smaller">
    <img src="https://placeholdit.imgix.net/~text?txtsize=38&txt=400%C3%97500&w=400&h=500" alt="">
  </div>
</section>

Answer 1

查看codepen，我制作了smaller .image position: absolute并调整了一些css aound

.images {
  background: url("http://kingofwallpapers.com/meadow/meadow-008.jpg");
  background-size: cover;
  height: 768px;
  /*height: 100vh;*/
  min-height: 500px;
  max-width: 100%;
  position: relative;
}


.smaller img {
    position: absolute;
    bottom: 0;
    left: 0;
    max-width: 50%;
    margin: 0 auto;
    right: 0;
}

@media screen and(max-width: 768px) {
  .images {
    height: 100vh;
    //position: relative;
  }
  .smaller img {
    //width: 80%;
    //height: auto;
    //margin-bottom: 0px;
  }
}

<section class="images">
  <div class="smaller">
    <img src="https://placeholdit.imgix.net/~text?txtsize=38&txt=400%C3%97500&w=400&h=500" alt="">
  </div>
</section>

<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis nulla laboriosam laborum sapiente sit voluptate voluptatum, velit eius quam minus natus incidunt omnis quidem cupiditate, maxime, ex reprehenderit minima enim!</p>

如何将此图像粘贴到div的底部

1 个答案: