Question

如果有人可以快速查看此代码并提供建议，那将非常感激。

我有一些图像可以在iPad和PC屏幕上正确调整大小。但是，只要在手机/缩小浏览器窗口大小上尝试它，图像就不会正确调整大小。

CSS：

.col-md-2 {   
    width: 16.66666667%;   
}

HTML：

<div class="col-md-2 col-sm-4">
    <div class="timeline-thumb">
        <div class="thumb">
            <img src="images/timeline6.jpg" alt="">
        </div>
        <div class="overlay">
            <div class="timeline-caption">
                <a href="#"><h4>Wrapping Services</h4></a>
                <p>Click for more info</p>
            </div>
        </div>
    </div>
</div>

图像宽度为170px，并且其中有6个在一行中，当您将鼠标滑过它们时，所有图像都以灰色突出显示（通过CSS）。

当我将浏览器的大小调整为手机的大小时，它们会变得比以前更大！

任何建议都非常感谢。

如果某人对该主题有所了解并且可以提供帮助，请与我联系并尽力提供您需要的任何信息。

感谢。

Answer 1

我试图了解您是否使用Bootstrap。如果是这样，你应该为小型设备添加一个类，尝试将col-xs-4或col-xs-6添加到DIV元素，即＃34; col-md-2 col-sm-4＆＃34 ;现在

Answer 2

看起来像Bootstrap。如果是这样，请将img-responsive帮助程序类添加到图像中。

<img class="img-responsive" src="images/timeline6.jpg" alt="">

这将允许您的图像按比例缩放并填充包含div的100％宽度，而不管视口大小。

当设备宽度小于400px时，HTML / CSS无法响应

2 个答案: