0

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

我有一些图像可以在 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>

图像宽 170 像素，一行中有 6 个，当您将鼠标悬停在它们上方时，它们都以灰色突出显示（通过 CSS）。

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

非常感谢任何建议。

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

谢谢。

4

2 回答 2

0

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

于 2015-12-07T17:23:44.630 回答
0

看起来像引导程序。如果是这样，请将 img-responsive helper 类添加到您的图像中。

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

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

于 2015-12-07T17:24:21.300 回答