title: Fitting image inside div with bootstrap
body: <p>I have one strange problem ( at least for me ). When I upload image and save to database then I show it on the page. The images are big <code>~10mb</code> and high resolution.</p>
  
  <p>When I manually re-size the image to 500x500 they are fitted in the div and all is good. But if I didn't re-size them and try to load into the div they break all the divs. What I mean is this:</p>
  
  <ol>
  <li>Image manually re-sized to 500x500
  <img src="https://i.stack.imgur.com/wrZxC.jpg" alt="enter image description here"> </li>
  <li>Images not re-sized and loaded into gallery with their dimensions.
  <img src="https://i.stack.imgur.com/p79n8.jpg" alt="enter image description here"></li>
  </ol>
  
  <p>This is the HTML and CSS of that part of page</p>
  
  <pre><code>&lt;div class="row"&gt;
     &lt;div class="col-md-4 col-ms-6"&gt;
        &lt;div class="g-item"&gt;
           &lt;img src="" alt=""&gt;
              &lt;a data-rel="lightbox" class="overlay" href=""&gt;
                  &lt;span&gt;+&lt;/span&gt;
              &lt;/a&gt;
        &lt;/div&gt; &lt;!-- /.g-item --&gt;
     &lt;/div&gt; &lt;!-- /.col-md-4 --&gt;
  &lt;/div&gt; &lt;!-- /.row --&gt;
  </code></pre>
  
  <p>and the css</p>
  
  <pre><code>.g-item {
      margin-bottom: 30px;
      padding: 6px;
      position: relative;
      background-color: white;
      overflow: hidden;
      -webkit-backface-visibility: hidden;
      /* Chrome, Safari, Opera */
      backface-visibility: hidden;
   }
  
  .g-item img {
      overflow: hidden;
      width: 100%;
  }
  
  .g-item .overlay {
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: #d8aa46;
      text-align: center;
      top: 0;
      left: 0;
      opacity: 0;
      filter: alpha(opacity=0);
  }
  </code></pre>
  
  <p>If I try with <code>height..</code> it is cropping the image...</p>
  
  <p>EDIT:</p>
  
  <p>I've put <code>height</code> and <code>width</code> to <code>250px</code>. Then  <code>min-width: 100%;</code> and <code>min-height: 100%;</code> and this is the result. The image is not fitting.</p>
  
  <pre><code>.g-item {
  margin-bottom: 30px;
  padding: 6px;
  position: relative;
  background-color: white;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  /* Chrome, Safari, Opera */
  backface-visibility: hidden;
  width: 250px;
  height: 250px;    
  }
  
  .g-item img {
  overflow: hidden;
  min-width: 100%;
  min-height: 100%;
  }
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/2Y0Lg.jpg" alt="enter image description here"></p>