引導程序中的圖像問題

Question

我正在創建一個電子商務網站，我必須在產品頁面中創建一個大型響應式和5個小型產品圖像，就像在Amazon或Flipkart中一樣。我知道class =「img-responsive」是用於引導程序的響應式圖像類，但它不適用於我的情況。當我在其他設備中打開網站時，主要大圖像變得更大（不響應）和所有小圖像來到大的一個。 Image on the big screenImage on the mobile device而且我對使用圖像的媒體查詢感到困惑。

下面是我的html，css和Js請幫我解決，如果我做錯了什麼。

這是我的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"); 
    } 
} 

這是我的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> 

這是我的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

的問題是，你是給。主要-IMG一套高度，而裏面的圖像是響應和自動高度。因此，當您移動到較小的屏幕時，圖像比您在媒體查詢中設置的220px高。如果您確實希望在該尺寸的屏幕上具有220像素的高度，則還需要在該媒體查詢中設置圖像的最大高度。