Question

我创建了一个简单的布局来显示计时器。这是一个有6张图片的div。我只想在屏幕尺寸缩小时缩小图像的大小。图像总是在一条直线上。我试过这个：

这就是@ 1280x800： enter image description here

<div class="row" id="timer-wrap" style="margin-top: 50px;">
    <img class="pull-left" src="img/left_arrow.png" id="left_arrow" />
    <div id="timer" class="text-center">
        <div class="col-xs-1 col-sm-2 col-lg-2">
            <img src="img/timer/days.png" width="147px" height="136px" />
        </div>
        <div class="col-xs-1 col-sm-2 col-lg-2">
            <img src="img/timer/hours.png" width="147px" height="136px"  />
        </div>
        <div class="col-xs-1 col-sm-2 col-lg-2">
            <img src="img/timer/minutes.png" width="147px" height="136px"  />
        </div>
        <div class="col-xs-1 col-sm-2 col-lg-2">
            <img src="img/timer/seconds.png" width="147px" height="136px"  />
        </div>
    </div>
    <img class="pull-right" src="img/right_arrow.png" id="right_arrow" />
</div>

这就是CSS：

#left_arrow, #right_arrow{
    position:absolute;
    top:50%;
    -webkit-transform:translateY(-50%);
    -moz-transform:translateY(-50%);
    -ms-transform:translateY(-50%);
    transform:translateY(-50%);
}

#left_arrow {
    left: 0;
}

#right_arrow {
    right: 0;
}

#timer-wrap {
    position: relative;
}

#timer img {
    padding: 10px;
    min-width: 121px;
    max-width: 100%;
}

但它不起作用。它不会根据屏幕尺寸缩小。我该怎么做才能达到效果？感谢。

Answer 1

编辑的小提琴是this one。

好的，首先，我们应该将.col-直接嵌套在.row下：

<div id="timer-wrap" style="margin-top: 50px;"><!-- `class="row"` removed -->
    <img class="pull-left" src="img/left_arrow.png" id="left_arrow" />
    <div id="timer" class="text-center">
        <div class="row"><!-- added this `div` -->
...

然后我们需要修复列化。我假设你希望它们在页面中居中，每个最多占屏幕的1/4（所以它们都可以连续排成四行）。因此，我们希望每个列可以跨越多达3个Bootstrap列，即.col-xs-3。我们还需要从height代码中删除width和img属性，因为它们现在正在胜过您的max-width: 100%。所以调整后的列是这样的：

            <div class="col-xs-3">
                <img src="img/timer/days.png" />
            </div>
            <div class="col-xs-3">
                <img src="img/timer/hours.png" />
            </div>
            <div class="col-xs-3">
                <img src="img/timer/minutes.png" />
            </div>
            <div class="col-xs-3">
                <img src="img/timer/seconds.png" />
            </div>

由于Bootstrap的网格是移动优先的，较大的屏幕将继承3列大小，除非你覆盖它们。

然后图像与箭头图像重叠。因此，为了纠正这一点，我们将限制#timer的宽度并将其置于#timer-wrap内，如下所示：

#timer {
    width: 80%; /* or whatever works */
    margin: 0 auto;
}

现在，目前，这些图像变得越来越小。 Bootstrap的网格已经有天沟填充，因此您可能希望暂时删除padding: 10px;上的#timer img。

使用#timer的宽度进行混乱可以帮助您获得所需的效果。您可能也想调整真正非常窄的屏幕的布局。

让我知道你还需要什么，我会更新答案。

Bootstrap - 随着屏幕缩小而缩小图像大小

1 个答案: