Изображения в магазине Woocommerce разбиты и искажены?

Question

У меня есть одна проблема 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;
}

изображения в магазине правильно выровнены, но это привело к тому, что некоторые изображения были искажены или искажены, их размер не соответствует их естественному размеру. Может кто-нибудь сказать мне, где моя ошибка в моем CSS и что сделать, чтобы это исправить? Большое спасибо

Answer 1

Вы можете использовать этот код в 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;
}

Answer 2

Да, вы растягиваете изображение, заставляя высоту быть 320px. Попробуйте вместо этого применить высоту к элементу-обёртке:

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