Css 框中的图像未做出正确的响应

我尝试将3个图像放入3个框中。这里我使用了bootstrap v3.1.1，这里的问题是图像没有正确居中。我的中等设备输出如bellow图像

这里没有任何问题的中型设备，但问题是在小型设备这是看起来像贝娄图像

这里的形象不是慢跑。 我添加了下面的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 ------->

---

有人能帮我解决这个问题吗？

您必须通过将这些属性添加到img类来使图像响应

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

“自动高度”确保在不丢失纵横比的情况下调整图像大小

如果您使用的是bootstrap，它有img responsive类，该类将负责映像的响应

---

提示：在调整图像大小时，图像往往会调整大小并缩小。为了使它看起来更美观，您可以添加类中心块以将图像保持在外部分区的中心：-

我在这里使用了引导img responsive类。是否需要创建另一个自己的响应类？不，如果您使用了引导img responsive类，请继续讨论img responsive。这就是出路：-

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