我正在使用Bootstrap来创建网格布局。我已经在其中添加了一些列，并且列中有背景图像。问题是当我缩小屏幕尺寸时，图像会被剪裁。
<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>
如何阻止它被剪裁但变得更小？
这是fiddle。