html - Image exceeding div's max-height and max-width rules -

i created picture grid , reason pictures aren't responding max width , max height rules.

i made class

.sizedimg {     max-width:100%;     max-height:100%; } 

to size images in natural state, want them fix in max-height 350px; , min-height 350px;

this html it. trying enclose image in 'productpiccontainer' pic won't exceed div, taking entire area of class 'item'

<div class="item">     <div class="productpiccontainer">     <?php echo "<img class='sizedimg' src='productpics/".$product['img'] ."' alt='product pic'>"; ?>     </div>            <p><?php echo "<a href='./viewproduct.php?view_product=$id'>" . $product['product_name'] . "</a>"; ?></p>     <p> <?php echo "$" . $product['price']; ?> </p>                                      </div> 

i created fiddle....https://jsfiddle.net/39qy0zdh/

but, reason isn't showing happening. so, if see live example of this, site buyfarbest.com . there if click on products tab, see mean. if @ empty product item on right, how trying format this, picture being in inner border.

anyone have idea why isn't working me?

to fix product image need to:

this stop image flowing onto text below:

.productpiccontainer {   width: 100%;   height: 100%;   border: 1px solid #d9d9d9;   min-height: 350px;   max-height: 350px;   overflow: hidden; } 

this fix position problem see more of product:

.sizedimg {   max-width: 100%;   position: relative;   margin-top: -70px; } 

if little drop shadow effect on products:

.item {   width: 32%;   text-align: center;   border: 1px solid #d9d9d9;   padding: 0px;   list-style: none;   float: left;   margin-right: 10px;   margin-bottom: 15px;   border-radius: 10px;   -moz-border-radius: 10px;   -webkit-border-radius: 10px;   min-height: 420px;   box-shadow: #999 0px 0px 6px; }