Question

我正在创建一个电子商务网站，我必须在产品页面中创建一个大响应和5个小产品图像，就像在Amazon或Flipkart中一样。我知道class =“img-responsive”是针对bootstrap中的响应式图像类，但它不适用于我的情况。当我在其他设备中打开网站时，主要的大图像越来越大（没有响应），所有小图像都是来到大的。 Image on the big screen Image 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

问题是你给.main-img一个设定的高度，而里面的图像是响应的并且有一个自动高度。因此，当您移动到较小的屏幕时，图像的高度大于您在媒体查询中设置的220px。如果您确实希望它在该屏幕大小上具有220px的高度，则还需要在该媒体查询中设置图像的最大高度。

关于bootstrap中图像的问题

1 个答案: