Question

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

我组成了班级

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

调整图片大小以使它们处于自然状态，但我希望它们能够修复max-height 350px;和min-height 350px;

这是我的html。我试图将图像封装在'productpiccontainer'中，以便pic不会超过该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;
}

Answer 2

您错过了sizedimg课程。

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

编辑：

将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%;
}

超过div的最大高度和最大宽度规则的图像

2 个答案: