Önyükleme görüntüsünü Bootstrap

Question

Web sayfamıza duyarlı görüntüler eklemek için bootstrap kullanıyorum. Sorun şu ki, birden fazla örtüşen resmim var ve bu durumda yeniden doğru şekilde yeniden ölçeklenemiyor. Bir şey eksik veya yapabileceği Bootstrap ötesine ulaşmak aşırı çalışıyorum, yanlış bir şey kurduysanız Emin değilim

Diagram Example

.

Kullandığım test kodu, bunu genel olarak saklıyorum.

HTML:

<div class="col-lg-12" > 
    <!-- Images inside the container image that are not being rescaled --> 
    <div class="children_Images"> 
    <img class="img-responsive" id="image_1" src="insideImage_1.png" alt="" style="left: 0.6em; top: -0.5em"/> 
    <img class="img-responsive" id="image_2" src="insideImage_2.png" alt="" style="left: 0.6em; top: -0.5em"/> 
    <img class="img-responsive" id="image_3" src="insideImage_3.png" alt="" style="left: 0.6em; top: -0.5em"/> 
    </div> 
</div> 

CSS: Sadece bu Bootstrap CSS ile mümkündür ve eğer merak ediyorum ya da ben bir şey yapıyor olmalıdır

.container{ 
    border: 2px solid red; 
    position: relative; /* Allows children to be placed relative to the panel */ 
    font-size: 10px; 
    z-index: 0; 
    height: 100%; 
    width: 100%; 
} 

.container img{ 
    max-width:100%; 
    width: auto; 
    position: absolute; 
    border:5px solid green; 
} 

.children_Images 
{ 
    transition: all 1s ease-in-out; 
} 

.children_Images:hover 
{ 
    transform: scale(1.05) translate(4em); 
} 

tüm çocuk resimlerini onc yeniden boyutlandıran JavaScript ile Ebeveyn imgesinin boyutu değiştirildi mi?

Answer 1

Ne yapmalıyım burada bu

<div class="container"> 
    <div class="col-xs-4"> 
     <img src="" alt="" /> 
    </div> 
    <div class="col-xs-4"> 
     <img src="" alt="" /> 
    </div> 
    <div class="col-xs-4"> 
     <img src="" alt="" /> 
    </div> 
</div> 

Ve css

.container img { 
    max-width: 100%; 
}