圖像在框中沒有正確響應

我想把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

圖像在框中沒有正確響應

回答

相關問題