Javascript 小尺寸背景图像剪辑

我正在使用引导创建网格布局。我做了一行，其中有一些列，这些列有它们的背景图像。问题是当我缩小屏幕尺寸时，图像会被剪裁

<div class="col-md-2 col-sm-2 col-xs-2" style="background: url(img/days.png) no-repeat; background-size: auto 100%; background-
                        position: center center; max-width: 100%;">
    <div class="days_dash">
        <div class="digit">
            <div class="top" style="display: none;">8</div>
            <div class="bottom" style="display: block;">8</div>
        </div>
        <div class="digit">
            <div class="top" style="display: none;">3</div>
            <div class="bottom" style="display: block;">3</div>
        </div> <span class="dash_title">days</span>

    </div>
</div>
<!-- /Days -->
<div class="col-md-1 col-sm-1 col-xs-1"></div>
<!-- Hours -->
<div class="col-md-2 col-sm-2 col-xs-2" style="background: url(img/hours.png) no-repeat; background-size: auto 100%; background-position: center center;">
    <div class="hours_dash">
        <div class="digit">
            <div class="top" style="display: none;">2</div>
            <div class="bottom" style="display: block;">2</div>
        </div>
        <div class="digit">
            <div class="top" style="display: none;">0</div>
            <div class="bottom" style="display: block;">0</div>
        </div> <span class="dash_title">hours</span>

    </div>
</div>
<!-- /Hours -->
<div class="col-md-1 col-sm-1 col-xs-1"></div>
<!-- Minutes -->
<div class="col-md-2 col-sm-2 col-xs-2" style="background: url(img/minutes.png) no-repeat; background-size: auto 100%; background-position: center center;">
    <div class="minutes_dash">
        <div class="digit">
            <div class="top" style="display: none;">3</div>
            <div class="bottom" style="display: block;">3</div>
        </div>
        <div class="digit">
            <div class="top" style="display: block; overflow: hidden; height: 26.97222222222222px; padding-top: 0px; margin-top: 0px; padding-bottom: 0px; margin-bottom: 0px;">6</div>
            <div class="bottom" style="display: block; overflow: hidden; height: 38.62196180555556px;">7</div>
        </div> <span class="dash_title">minutes</span>

    </div>
</div>
<!-- /Minutes -->
<div class="col-md-1 col-sm-1 col-xs-1"></div>
<!-- Seconds -->
<div class="col-md-2 col-sm-2 col-xs-2" style="background: url(img/seconds.png) no-repeat; background-size: auto 100%; background-position: center center;">
    <div class="seconds_dash">
        <div class="digit">
            <div class="top" style="display: block; overflow: hidden; height: 37.4375px; padding-top: 0px; margin-top: 0px; padding-bottom: 0px; margin-bottom: 0px;">5</div>
            <div class="bottom" style="display: block; overflow: hidden; height: 27.9931640625px;">0</div>
        </div>
        <div class="digit">
            <div class="top" style="display: block; overflow: hidden; height: 37.4375px; padding-top: 0px; margin-top: 0px; padding-bottom: 0px; margin-bottom: 0px;">9</div>
            <div class="bottom" style="display: block; overflow: hidden; height: 27.9931640625px;">0</div>
        </div> <span class="dash_title">seconds</span>

    </div>
</div>
<!-- /Seconds -->
<div class="col-md-1 col-sm-1 col-xs-1"></div>

8.
8.
3.
3.
天
2.
2.
0
0
小时
3.
3.
6.
7.
会议记录
5.
0
9
0
秒

我怎样才能阻止它不被剪短而变得更小

---

这是一个。

您可以使用

背景大小：contain

自动调整背景图像的大小

---

在这里拉小提琴：

你到底想让它做什么？调整背景图像的大小？你的字体也会调整大小吗？那么字体大小呢？恐怕在css中是不可能的，至少据我所知是不可能的。你必须使用javascript。我需要什么样的脚本？javascript是一种编程语言。但是对于CSS，它可以通过媒体查询来完成。请看这里：视口单元也可以证明是一种解决方案：