title: fit an image in a div where the image size varies
body: <p>I'm trying to fit custom size images into a div ,but the images not aligning within the div.I want the alignment like the image in screenshot 1.Please tell me where i'm wrong.</p>
  
  <p>This is a test project actually,i have uploaded the files to the site .You can find it @ <a href="http://estoreproj.xyz/sony.aspx" rel="nofollow noreferrer">http://estoreproj.xyz/sony.aspx</a></p>
  
  <p>I want it to look alligned like the products in the samsung page which is under categories as dropdown.</p>
  
  <p>here's the JSFiddle---->>> <a href="https://jsfiddle.net/b160aj5m/" rel="nofollow noreferrer">https://jsfiddle.net/b160aj5m/</a></p>
  
  <p>The screenshots ,css and code are below</p>
  
  <p>Screenshots:
  <a href="https://i.stack.imgur.com/Rz21g.png" rel="nofollow noreferrer">screenshot1</a>
  <a href="https://i.stack.imgur.com/slaex.jpg" rel="nofollow noreferrer">screenshot2</a></p>
  
  <pre><code>.product{
  display: block;
  float:left;
  margin: 1% 0 1% 1%;
  
  }
  
  
  
  .productgrid  img{
  
      max-width:100%;
      display:block;
      padding-bottom: 8px;
      margin: 0 auto;
   }
  </code></pre>
  
  <p>HTML Code:</p>
  
  <pre><code>&lt;div class="productgrid"&gt;
                   &lt;img src="phonepics/sony/z5.jpg" &gt;
                    &lt;a href="single.html"&gt;Sony Xperia Z5  &lt;/a&gt;
                   &lt;h3&gt;$123&lt;/h3&gt;
                   &lt;ul&gt;
                      &lt;button class="button"&gt;&lt;span&gt;Buy &lt;/span&gt;&lt;/button&gt;
                   &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>