图片超出div的最大高度和最大宽度规则

Question

我创建了一个图片网格，由于某种原因，图片不响应最大宽度和最大高度规则。

我补了课

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

调整图像大小，使它们处于自然状态，但我希望它们固定在max-height 350px;和min-height 350px;

这是我的 html。我试图将图像包含在“productpiccontainer”中，以便图片不会超过该 div，但它占用了“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>

我创建了一个小提琴...... 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;
}