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

Question

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

javascriptjqueryhtmlcsstwitter-bootstrap

3

我有一个简单的布局来显示一个计时器。它是一个带有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%;
}

但是它没有起作用。它不会根据屏幕大小自动缩小。我该怎么做才能实现这个结果呢？谢谢。

- Mohammad Areeb Siddiqui

你尝试过将图像宽度设置为百分比吗？ - royhowie

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- calvin · Accepted Answer

编辑后的代码片段是这个。

首先，我们应该将.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列，即.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的网格已经有间距填充，因此您可能希望删除当前在#timer img上具有的padding: 10px;。

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

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