框中的图像没有正确响应

Question

我正在尝试将3个图像放入3个盒子。这里我使用了bootstrap 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 for image

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

愿任何人帮我解决这个问题吗？

Answer 1

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

来使图像响应

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

自动高度可确保在不丢失宽高比的情况下调整图像大小

如果您使用的是bootstrap，它会有img-responsive类，它会处理图像的响应性。

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