Question

我有一个网站中心有一个图像网格，当我在1920 * 1080桌面上看到它时，图像间距合适且效果很好，但是当它以较低分辨率观看时（或者如果用户调整大小）窗口）图像移动并破坏网站的布局。当网站在较低分辨率的计算机中显示或窗口较小时，我需要一种缩放图像的方法。

<div class="imagenes" style="padding: 2px 0px 20px;">
<div class="row imagenes" style="display: inline">
    <div class="col-sm-3" style= "height: 320px; width: 480px; margin-left:165px; box-shadow: 10px 10px 5px #888888;">
        <img src="images/inscrib1.jpg"/>
    </div>
    <div class="col-sm-3" style= "height: 320px; width: 480px; margin-left: 25px; margin-right: auto; box-shadow: 10px 10px 5px #888888;">
        <img src="images/inscrib2.jpg"/>
    </div>
    <div class="col-sm-3" style= "height: 320px; width: 480px; margin-left: 25px; margin-right: 165px; box-shadow: 10px 10px 5px #888888;">
         <img src="images/inscrib3.jpg"/>
    </div>

</div>

任何人都可以帮助我吗？

Answer 1

根据Bootstrap文档：http://getbootstrap.com/css/#images

将“img-responsive”类添加到图像中。

<img class="img-responsive" src="..." />

Answer 2

使用媒体查询：

@media screen and (max-width : **the_size_you_want**px) {

    .col-sm-3 {
        width: **idem**px;
        height: **idem**px;
    }

    .col-sm-3 img {
        max-width: 100%;
        height: auto;
    }

}

图像没有在Windows上正确调整大小，该怎么办？

2 个答案: