title: Bootstrap - Shrink image size as screen shrinks
body: <p>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:</p>
  
  <p>This is how it is @ 1280x800:
  <img src="https://i.stack.imgur.com/o4e2w.png" alt="enter image description here"></p>
  
  <pre><code>&lt;div class="row" id="timer-wrap" style="margin-top: 50px;"&gt;
      &lt;img class="pull-left" src="img/left_arrow.png" id="left_arrow" /&gt;
      &lt;div id="timer" class="text-center"&gt;
          &lt;div class="col-xs-1 col-sm-2 col-lg-2"&gt;
              &lt;img src="img/timer/days.png" width="147px" height="136px" /&gt;
          &lt;/div&gt;
          &lt;div class="col-xs-1 col-sm-2 col-lg-2"&gt;
              &lt;img src="img/timer/hours.png" width="147px" height="136px"  /&gt;
          &lt;/div&gt;
          &lt;div class="col-xs-1 col-sm-2 col-lg-2"&gt;
              &lt;img src="img/timer/minutes.png" width="147px" height="136px"  /&gt;
          &lt;/div&gt;
          &lt;div class="col-xs-1 col-sm-2 col-lg-2"&gt;
              &lt;img src="img/timer/seconds.png" width="147px" height="136px"  /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;img class="pull-right" src="img/right_arrow.png" id="right_arrow" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And this is the CSS:</p>
  
  <pre><code>#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%;
  }
  </code></pre>
  
  <p>But it's not working. It doesn't shrinks according to screen size. What can I do to achieve the result? Thanks.</p>