适合框架的图像（Woocommerce）

Question

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

Answer 1

正如 Vorany 所说，这是因为正在使用的图像被裁剪。但是，如果您想在不裁剪的情况下包含图像，请使用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;
}

Answer 2

如果您查看源代码，那是那些以这种方式裁剪的图像，而不是样式的错。