Obraz w skrzynkach nie reaguje poprawnie - css, twitter-bootstrap

Próbuję umieścić 3 obrazy w 3 pudełkach. Tutaj użyłem bootstrap v3.1.1, tutaj problem polega na tym, że obraz nie jest poprawnie centrowany.

Tutaj nie ma żadnego problemu dla średniego urządzenia, ale problem dotyczy małego urządzenia, które wygląda jak poniżej

Tutaj obraz nie jest galopujący. Dodałem poniższy kod HTML i kod 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/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/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/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 ------->

Oto moje własne css dla obrazu

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

Czy ktoś może mi pomóc w rozwiązaniu tego problemu?

Odpowiedzi:

Musisz dostosować obraz, dodając te właściwości do klasy img

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

Automatyczna wysokość zapewnia zmianę rozmiaru obrazu bez utraty proporcji

Jeśli używasz bootstrap, ma klasę img-responsive który zadba o reakcję obrazu.

Wskazówka : Po zmianie rozmiaru obraz ma tendencję do zmiany rozmiaru i kurczenia się. Aby wyglądało ładnie, możesz dodać klasę center-block aby zachować obraz w środku zewnętrznego div :-)