Problem in Bezug auf Bilder im Bootstrap

Question

Ich erstelle eine E-Commerce-Website, in der ich ein großes reaktionsfähiges und 5 kleine Produktbilder auf der Produktseite wie in Amazon oder Flipkart erstellen musste. Ich kenne die Klasse = "img-responsive" ist für reaktionsfähige Bildklasse im Bootstrap, aber es funktioniert nicht in meinem Fall.Wenn ich die Seite in anderen Geräten öffne, werden das große Hauptbild immer größer (nicht reagierend) und alle kleinen Bilder sind Komm zu dem Großen. Image on the big screenImage on the mobile device und auch ich werde immer verwirrender mit den Medienabfragen beim Arbeiten mit den Bildern.

Unten ist meine html, css und Js bitte helfen Sie mir, wenn ich etwas falsch gemacht habe.

Dies ist mein Javascript

var images = document.getElementById("mydiv").getElementsByTagName("img"); 
for (var i = 0; i < images.length; i++) 
{ 
images[i].onmouseover = function() { 
this.style.cursor = 'hand'; 
this.style.borderColor = 'red'; 
} 
images[i].onmouseout = function() { 
this.style.cursor = 'pointer'; 
this.style.borderColor = 'grey'; 
} 
} 
function productImage(event) 
{ 
    event= event || window.event; 

    var targetElement= event.target || event.srcElement; 
    if(targetElement.tagName == "IMG") 
    { 
     mainImage.src = targetElement.getAttribute("src"); 
    } 
} 

Das ist mein HTML

<div class="col-md-7 showcase1"> 
       <div class="row"> 
        <div class="col-md-12 main-img"> 
         <img id="mainImage" src="Tiger.jpg" class="img-responsive" alt=" No Image"> 
        </div> 
       </div> 
       <div id="mydiv" onclick= "productImage(event)"> 
        <div class="row sub-image-row"> 
         <div class="col-xs-2 sub-img" > 
          <img src="Tiger.jpg" class="img-responsive " alt=" No Image"> 
         </div> 
         <div class="col-xs-2 sub-img"> 
          <img src="Lion.jpg" class="img-responsive" alt=" No Image"> 
         </div> 
         <div class="col-xs-2 sub-img"> 
          <img src="Tiger.jpg" class="img-responsive" alt=" No Image"> 
         </div> 
         <div class="col-xs-2 sub-img"> 
          <img src="Tiger.jpg" class="img-responsive" alt=" No Image"> 
         </div> 
         <div class="col-xs-2 sub-img"> 
          <img src="Tiger.jpg" class="img-responsive" alt=" No Image"> 
         </div> 
        </div> 
       </div> 
      </div> 

Das ist mein CSS

.showcase1,.main-img,.sub-img{ 
    margin:0px; 
    padding:0px; 
} 
.main-img{ 
    width:700px; 
    height:400px; 
    margin-bottom:10px; 
    //border:1px solid black; 
} 
.main-img img{ 
    max-height:400px; 
} 
.sub-img{ 

    width:110px; 
    height:110px; 
    margin:5px; 
    border-radius:1px; 
} 
.sub-img img{ 
    max-width:110px; 
    max-height:110px; 
    overflow:hidden; 
} 
@media (max-width: 400px) { 
    .main-img{ 
     height:220px; 
    } 
} 

Answer 1

Das Problem ist, dass Sie .main-img einen Satz geben Höhe, während das Bild im Inneren reagiert und eine automatische Höhe hat. Wenn Sie also zu einem kleineren Bildschirm wechseln, hat das Bild eine größere Höhe als die 220px, die Sie in Ihrer Medienabfrage festgelegt haben. Wenn Sie wirklich eine Höhe von 220px auf dieser Bildschirmgröße haben möchten, müssen Sie auch die maximale Höhe des Bildes in dieser Medienabfrage einstellen.