图像适合框架 (Woocommerce)

Question

我在保持在线目录中的纵横比的同时调整图像时遇到问题。我使用CSS，现在看起来好多了，但是有些产品的图片不适合框架。如何在不切割整个框架的情况下使图像始终适合？

Answer 1

如果您查看源代码，就会发现这些图像是以这种方式裁剪的，而不是样式的问题。

Answer 2

正如 Voreny 所说，这是因为正在使用的图像被裁剪了。但是如果你想在不裁剪的情况下包含图像，请使用 object-fit:contain.

如果要制作图像 100% or cover 但要保持图像比例，请使用 object-fit:cover。但是 属性 会稍微裁剪您的图像以保持比例。

试试这个：

.woocommerce-page .product-holder .product-img{
height: 200px;
width: 200px;
display: flex; // Remove this
}
.woocommerce-page .product-holder .product-img.no-border img{
    height: 185px;
    object-fit:contain;
}