この画像をdivの下に貼り付ける方法

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 .imageposition: absoluteを作り、

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

012 aoundいくつかのCSSを微調整します