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

Question

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

在 1280x800 下是这样的:

<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

编辑后的 fiddle 是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(这样它们可以全部四个排成一排)。所以我们希望每个都跨越 Bootstrap 的 3 个列，即 .col-xs-3。我们还需要从 img 标签中删除 height 和 width 属性，因为它们超过了 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 的网格已经有了 gutter padding，所以你可能想删除你现在在 #timer img 上的 padding: 10px;。

调整 #timer 的宽度应该可以帮助您获得想要的外观。您可能还想为非常非常窄的屏幕调整布局。

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