ブートストラップ3：/ 2つの画像が一緒に反応する

Question

とBosstrap3 /。 イメージは2つです。 1つの画像が大きくなります。もう一つは小さいです。

両方の画像が応答します。

大きな画像に小さな画像を入れたいです。

静的ページは簡単です。しかし、私はそれに応答するページのためにそれをしたい。

画像の位置をページのサイズ変更で変更しないようにしたい。

私はこれ試してみてください。

<div class="container"> 

<div class=" panel panel-default"> 
    <div class="panel-body" style="padding:1px"> 
     <img class="img-responsive" src="http://placehold.it/1170x300" alt="Chania"> 
    </div> 
    <div class="panel-footer"> 
     <a href="#" class="pull-right">View all</a> <h4>Bootply Editor &amp; Code Library</h4> 
    </div> 
</div> 
</div> 

<img class="img-responsive mytumb" src="http://placehold.it/150x150/000"> 

とCSSコード：

.mytumb{ 
    position:absolute; 
    top:50px; 
    left:40px; 

} 

をしかし、それは、静的なページのために動作します。

どうすればいいですか？

https://jsfiddle.net/DTcHh/18935/

Answer 1

あなたは解決策position one image above anotherに行くことができます、あなたは確かに解決策を得るでしょう。ハッピーコーディング！

Answer 2

それがこのcontainerにabsolute位置relativeにあるので、あなたの.container div内のあなたのimageを追加することができます。

Like this

そして、メディアと遊ぶそれは毎回収まる確かめるにを照会します。

.container { position: relative; } 
@media (max-width: 767px){ 
    .img-responsive.mytumb { width: 20%} 
} 

これは完璧ではありませんが、あなたは私が考えている考えを持っています。