Woocommerce 商店的图像被粉碎和扭曲？答案

【问题标题】：Images on Woocommerce shop are smashed and distorzed?Woocommerce 商店的图像被粉碎和扭曲？
【发布时间】：2018-05-02 20:12:34
【问题描述】：

我有一个 CSS 问题（我希望如此）。在我身边插入这个 CSS 后：

.owl-item>.product .product-thumbnail>img, .owl-item>.product .wp-post- 
image, .products:not(.electro-v1)>.product .product-thumbnail>img, 
.products:not(.electro-v1)>.product .wp-post-image {
height: 320px !important;
}

shop 上的图像已正确对齐，但这会导致一些图像被刮花或扭曲，其大小不符合自然大小。有人可以告诉我我的 CSS 错误在哪里，以及如何解决它？非常感谢

【问题讨论】：

.wp-post-image 是什么类型的元素？如果您包含相关的 html 会有所帮助
例如<img width="300" height="300" src="https://images-na.ssl-images-amazon.com/images/I/518dfyMchQL.jpg" class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail wp-post-image" alt="">

标签： php css wordpress woocommerce

【解决方案1】：

是的，您通过将高度强制为 320 像素来拉伸图像。尝试将高度应用于包装元素：

.owl-item>.product .product-thumbnail, 
.products:not(.electro-v1)>.product .product-thumbnail {
  height: 320px !important;
}

【讨论】：

这会使图像的高度不相等。
正确。由于您的图像的高度/纵横比不相等，因此这是不拉伸它们的唯一方法。

【解决方案2】：

您可以在主题的functions.php中使用此代码。

add_filter( 'post_thumbnail_html', 'remove_thumbnail_dimensions', 10 );
add_filter( 'image_send_to_editor', 'remove_thumbnail_dimensions', 10 );

function remove_thumbnail_dimensions( $html ) {
    $html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html );
    return $html;
}

【讨论】：