图像在框中没有正确响应

我想把3图像放入3个盒子。在这里我使用了bootstrap v3.1.1，这里的问题是图像没有正确对中。我的中等设备输出像波纹管图像图像在框中没有正确响应

enter image description here

这里没有对媒体设备，但该问题的任何问题是在小型设备，这是寻找像

enter image description here

这里图像不慢跑波纹图像。我有波纹管添加HTML代码和CSS代码

<div class="container"> 
<div class="row"> 
<div class="col-md-12 col-sm-12"> 


<!---------------------------> 

    <div class="main-box"> 
<div class="box" > 
    <div class="box1 box sides-hz-2"> 
      <a href="#"><img src="images/sss.png" class="img-responsive"></img> </a> 
      <div class="list1"> 
       <li class="header1"><a href="#"><Strong>Select</Strong></a> 
       </li> 
      </div> 
    </div> 
    <div class="box1 box sides-hz-2"> 
     <a href="tce_show_online_users.php"><img src="images/uuu.png" class="img-responsive"></img> </a> 
      <div class="list1" style="background:#8C7E63;"> 
       <li class="header1"><a href="#"><Strong>Online</Strong></a> 
       </li> 
      </div> 
    </div> 
    <div class="box1 box sides-hz-2"> 
      <a href="#"><img src="images/uuu.png" class="img-responsive"></img> </a> 
      <div class="list1"> 
       <li class="header1"><a href="#"><Strong>Import</Strong></a> 
       </li> 
      </div> 
    </div> 

</div> 


<!---------------------------> 

</div> 
</div> <!--end of grid --> 
</div> <!----end of row -------> 
</div> <!----end of continer ------->

这里我自己的CSS图像

div.box1 img 
{ 
    display:block; 
    margin-left:25%; 
}

五月人帮助我解决这个问题？

来源

2014-08-27 Alimon Karim

您必须通过添加这些属性的img类

.responsive-image{ 
     height:auto; 
     width:100%; 
    }

自动高度确保缩放图像，而不如果您正在使用的引导失去长宽比

的做响应的图像，它具有img-responsive类这将照顾图像的响应性。

提示：在调整图像大小时，往往会调整大小和缩小图像。为了使它看起来不错，你可以添加类center-block，以保持图像在外部div的中心:-)

来源

2014-08-27 15:51:13

我已经在这里使用了boot-strap img-responsive类。是否有必要创建另一个自己的响应类？ – 2014-08-27 15:55:48

不，如果你使用bootstrap，那么继续关于img-responsive。这是要走的路:-) – 2014-08-27 15:57:06

添加了编辑和奖金提示。 – 2014-08-27 15:58:43

图像在框中没有正确响应

回答

相关问题