Изображение, превышающее правила max-height и max-width div

Question

Я создал сетку изображения и по какой-то причине изображения не отвечают правилам максимальной ширины и максимальной высоты.

я сделал класс

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

Чтобы изменить размер изображения так, чтобы они были бы в их естественном состоянии, но я хочу, чтобы зафиксировать в max-height 350px; и min-height 350px;

Это мой HTML для Это. Я пытаюсь вложить изображение в «productpiccontainer» так, чтобы рис не будет превышать этот DIV, но это занимает всю область из класса «пункта»

<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> 

Я создал скрипку ... . https://jsfiddle.net/39qy0zdh/

Но по какой-то причине это действительно не показывает, что происходит. Итак, если кто-то хочет увидеть живой пример этого, мой сайт - buyfarbest.com. Если вы нажмете на вкладку «Продукты», вы точно увидите, что я имею в виду. Если вы посмотрите на пустой элемент продукта справа, вот как я пытаюсь отформатировать его, причем изображение находится на внутренней границе.

У кого-нибудь есть идеи, почему это не работает для меня?

Answer 1

Чтобы зафиксировать изображение продукта, что вам нужно:

Это остановит изображение, протекающий на текст ниже:

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

Это исправит проблему позиции, чтобы вы видеть больше продукт:

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

Если вам нравится мой небольшой эффект теневой тени на продукты:

.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; 
} 

Answer 2

Вы пропустили класс sizedimg со своего изображения.

https://jsfiddle.net/39qy0zdh/2/

Edit:

Установите max-height на .sizedimg в 350px. max-height не будет работать, как описано в https://stackoverflow.com/a/14263416/388566

еще лучше, сделать это https://jsfiddle.net/39qy0zdh/5/

Вам необходимо установить фиксированную высоту на .productpiccontainer в любом случае, чтобы сохранить вашу сетку аккуратно.

Вот некоторые улучшенные CSS.

.productpiccontainer { 
    width: 100%; 
    height: 350px; 
    border: 1px solid #D9D9D9; 
} 
.sizedimg { 
    max-width: 100%; 
    max-height: 100%; 
}