title: Image exceeding div's max-height and max-width rules
body: <p>I created a picture grid and for some reason the pictures aren't responding to the max width and max height rules. </p>
  
  <p>I made up the class </p>
  
  <pre><code>.sizedimg {
      max-width:100%;
      max-height:100%;
  }
  </code></pre>
  
  <p>To size the images so that they would be in their natural state, but I want them to fix in the <code>max-height 350px;</code> and <code>min-height 350px;</code></p>
  
  <p>This is my html for it. I am trying to enclose the image in 'productpiccontainer' so that the pic won't exceed that div, but it is taking up the entire area of the class 'item'</p>
  
  <pre><code>&lt;div class="item"&gt;
      &lt;div class="productpiccontainer"&gt;
      &lt;?php echo "&lt;img class='sizedimg' src='productpics/".$product['img'] ."' alt='Product Pic'&gt;"; ?&gt;
      &lt;/div&gt;      
  
      &lt;p&gt;&lt;?php echo "&lt;a href='./viewProduct.php?view_product=$id'&gt;" . $product['product_name'] . "&lt;/a&gt;"; ?&gt;&lt;/p&gt;
      &lt;p&gt; &lt;?php echo "$" . $product['price']; ?&gt; &lt;/p&gt;                                     
  &lt;/div&gt;
  </code></pre>
  
  <p>I created a fiddle....<a href="https://jsfiddle.net/39qy0zdh/" rel="nofollow">https://jsfiddle.net/39qy0zdh/</a></p>
  
  <p>But, for some reason it really isn't showing what is happening. So, if anyone would like to see a live example of this, my site is buyfarbest.com . There if you click on the products tab, you will see exactly what I mean. If you look at the empty product item on the right, that is how I am trying to format this, with the picture being in the inner border.</p>
  
  <p>Anyone have any idea why this isn't working for me?</p>