图像超过div的max-height和max-width规则

Question

图像超过div的max-height和max-width规则

5

我创建了一个图片网格，但是图片没有响应最大宽度和最大高度规则。

我创建了这个类。

.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。在那里，如果您点击“产品”选项卡，您将会看到正是我想要的效果。如果您看右边空的产品项目，这就是我想要的格式，图片位于内部边框中。有人知道为什么这对我不起作用吗？

- Becky

2

你需要将类sizedimg添加到图片中：<img class="sizedimg" src="http://imageshack.us/a/img850/1646/pu9p.jpg" /> - https://jsfiddle.net/39qy0zdh/1/ - Andrew

我在其中有一个名为“sizedimg”的类吗？如果您查看我的问题，那就是我在页面上实际上的代码。我只是为了演示添加了一张随机图片。 - Becky

你的 jsfiddle 缺少了这个类。 - Andrew

你有任何想法为什么这在我的实际代码中不起作用吗？如果我在其中有那个类，那么为什么它会占据整个父级div呢？ - Becky

尝试在.productpiccontainer中添加overflow: hidden; - 这将阻止图像溢出到下面的文本区域。您的示例无法展示问题，最好前往该网站查看。 - Andrew

显示剩余2条评论

2个回答

0

你忘记给图片添加 sizedimg 类。

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

编辑：

将.sizedimg的max-height设置为350px。max-height不起作用，如https://dev59.com/VWYq5IYBdhLWcg3wtCzO#14263416所述。

更好的方法是使用https://jsfiddle.net/39qy0zdh/5/

无论如何，您都需要在.productpiccontainer上设置固定高度，以保持网格整洁。

这是一些改进后的CSS。

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

- PiranhaGeorge

我在其中有一个'sizedimg'类？如果您查看我的问题，那就是我在页面上实际上的代码。我只是为了演示添加了一张随机图片。 - Becky

啊，抱歉，尽管 jsfiddle 与网站相同。您需要在 sizedimg 上设置 max-height: 350px。max-height: 100% 不起作用。 - PiranhaGeorge

有没有更好的方法来做到这一点，以便它能够适应不同尺寸的屏幕？我不是指针对手机或平板电脑的媒体查询。我是指针对不同尺寸的桌面显示器。这就是为什么我尝试使用100％的原因，这样它就可以保持通用的相同大小。 - Becky

你无法测量100%的100%，必须设置一个基准值。你应该将.productpiccontainer类的高度设置为350px，而不是使用最小和最大值。然后sizedimg可以保持max-height: 100%。 - PiranhaGeorge

我很感激你的所有帮助。如果能够调整图像大小，我认为你的解决方案将是最好的。我需要它们更大，不能让它们小。如果我得到不同大小的图像，我很可能会回来使用这段代码。一旦我可以进行积极的点赞，我就会回来给你点赞。谢谢。 - Becky

显示剩余2条评论

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Andrew · Accepted Answer

为了修复产品图片，您需要执行以下操作：

这将阻止图像流动到下面的文本中：

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