css - 框中的图像没有做出正确的响应

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

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

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

Answer 1

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

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

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

如果您使用的是 Bootstrap ，它有 img-responsive 类，它将负责图像的响应。

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