title: Image high resolution not resizing fit to div
body: <p>I found many topics but I still have yet to find solution for my issue. When using image src from lorempixel, my code works well but when using image local (4000x3000), it not resizing to fit the div. Hope anyone can help me.</p>
  
  <p><strong>I'm using Bootstrap 3.1.1</strong></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;section class="portfolio"&gt;
      &lt;div class="portfolio-list"&gt;
          &lt;ul&gt;
              &lt;li&gt;
                  &lt;div class="portfolio-box"&gt;
                  &lt;a href="#"&gt;
                      &lt;img src="img/thumb-1.jpg" alt="Portfolio item"&gt;
                  &lt;/a&gt;
                  &lt;/div&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;div class="portfolio-box"&gt;
                  &lt;a href="#"&gt;
                      &lt;img src="http://lorempixel.com/598/386/" alt="Portfolio item"&gt;
                  &lt;/a&gt;
                  &lt;/div&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;div class="portfolio-box"&gt;
                  &lt;a href="#"&gt;
                      &lt;img src="http://lorempixel.com/598/386/" alt="Portfolio item"&gt;
                  &lt;/a&gt;
                  &lt;/div&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;div class="portfolio-box"&gt;
                  &lt;a href="#"&gt;
                      &lt;img src="http://lorempixel.com/598/386/" alt="Portfolio item"&gt;
                  &lt;/a&gt;
                  &lt;/div&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;div class="portfolio-box"&gt;
                  &lt;a href="#"&gt;
                      &lt;img src="http://lorempixel.com/598/386/" alt="Portfolio item"&gt;
                  &lt;/a&gt;
                  &lt;/div&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;div class="portfolio-box"&gt;
                  &lt;a href="#"&gt;
                      &lt;img src="http://lorempixel.com/598/386/" alt="Portfolio item"&gt;
                  &lt;/a&gt;
                  &lt;/div&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;  &lt;!-- end portfolio-list --&gt;
  &lt;/section&gt;  &lt;!-- end portfolio --&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.portfolio-list{
      background-color: #cccccc;
  
      li{
          float: left;
          width: 33.33%;
          display: block;
      }
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/2mbsb16m/" rel="nofollow">http://jsfiddle.net/2mbsb16m/</a></p>