bootstrap3:/iki görüntü birbirine yanıt veriyor

Question

with Bosstrap3 /. 2 fotoğrafım var. Bir görüntü büyüktür. diğeri küçüktür. Her iki görüntünün de duyarlı olduğu

.

Büyük resim üzerine küçük resim koymak istiyorum.

Statik bir sayfa için kolaydır. Ama ben duyarlı bir sayfa için yapmak istiyorum.

Sayfanın yeniden boyutlandırılması ile görüntülerin konumunu değiştirmek istemiyorum.

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

VE css kodu:

Bunu deneyin

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

} 

Ama bu statik sayfa için çalışır.

Bunu nasıl yapabilirim?

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

Answer 1

position one image above another numaralı çözüme buradan ulaşabilirsiniz, mutlaka bir çözüm bulursunuz. Mutlu Kodlama!

Answer 2

ekleyebilir senin .container div yüzden bu container için absolute pozisyonunda relative yılında aşağıdadır içeride image. medya bu her şey uyuyor yapmak sorgular ile

Like this

Ve sonra, oynarlar.

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

Bu mükemmel değil, ancak benim düşüncem var.