상자의 이미지가 올바르게 반응하지 않습니다.

Question

3 개의 이미지를 3 개의 상자에 넣으려고합니다. 여기에 부트 스트랩 v3.1.1을 사용했습니다. 이미지가 정확히 가운데 맞춤되지 않습니다. 내 장치 출력은

입니다. 여기

에는 중간 장치하지만 문제에 대한 문제가 적은 기기에이 여기

화상 구보되지 노호 화상처럼 보이는 않는다. 나는 울부 짖는 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%; 
} 

월 누군가가 수정이 문제를 좀 도와를 추가해야 ?

당신은 클래스를

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

자동 높이 IMG는 부트 스트랩을 사용하는 경우 화면 비율

을 잃지 않고 이미지 크기를 조정 확실하게 이러한 속성을 추가하여 반응 영상을해야합니다

Answer 1

, 그것은 클래스 img-responsive있다 그러면 이미지의 응답 성이 향상됩니다.

팁 : 크기를 조정할 때 이미지의 크기가 조절되고 줄어드는 경향이 있습니다. 이미지를 멋지게 만들려면 center-block 클래스를 추가하여 외부 div의 중심에 이미지를 유지하십시오 .-)