javascript - Bootstrap - Shrink image size as screen shrinks - Stack Overflow

admin管理员组

文章数量:1429611

I have a simple layout created to show a timer. It's a div with 6 images. I just want to shrink the size of the images as the screen size shrinks. The images are in a straight line always. I tried this:

This is how it is @ 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>

And this is the 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%;
}

But it's not working. It doesn't shrinks according to screen size. What can I do to achieve the result? Thanks.

I have a simple layout created to show a timer. It's a div with 6 images. I just want to shrink the size of the images as the screen size shrinks. The images are in a straight line always. I tried this:

This is how it is @ 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>

And this is the 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%;
}

But it's not working. It doesn't shrinks according to screen size. What can I do to achieve the result? Thanks.

• javascript
• jquery
• html
• css
• twitter-bootstrap

Share Improve this question Follow asked Mar 21, 2014 at 21:41 Mohammad Areeb SiddiquiMohammad Areeb Siddiqui 10.2k1616 gold badges7373 silver badges118118 bronze badges 1

• Have you tried making the image width equal to a percent? – royhowie Commented Mar 21, 2014 at 21:44

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

The edited fiddle is this one.

Okay, first, we should nest the .col-s directly under the .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` -->
...

Then we need to fix the columnizing. I'm assuming you want them centered in the page and each at most 1/4 of the screen (so they can all four fit in a row). So we want each to span as many as 3 of Bootstrap's columns, i.e. .col-xs-3. We also need to remove the height and width attributes from the img tags, as they're trumping your max-width: 100% right now. So the adjusted columns are like this:

            <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>

Since Bootstrap's grid is mobile-first, the larger screens will inherit the 3-column size unless you override them.

But then the images overlap the arrow images. So to rectify that, we're going to limit #timer's width and center it within #timer-wrap, like so:

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

Now, at the moment, these images are getting super small. Bootstrap's grid already has gutter padding, so you may want to remove the padding: 10px; that you have on #timer img at the moment.

Messing with the width of the #timer should help you get the look you want. You may want to adjust the layout for really really narrow screens, too.

Let me know what else you need and I'll keep the answer updated.

本文标签： javascriptBootstrapShrink image size as screen shrinksStack Overflow