html - 图片超出 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>

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