Как убрать обрезание миниатюр в woocommerce?

Question

[Albert]

Как убрать обрезание миниатюр в woocommerce?

страница сайта

Comments

[Albert]

function custom_single_product_archive_thumbnail_size( $size ) {

// определение нового размера для изображения в списке товаров
$size = 'medium';

return $size;
}



может кому будет полезно, решил через этот хук.

Answer 1

[Юрий]

Мы в свое время после разных маневров пришли к выводу, что проще и дешевле заранее готовить квадратные картинки. Ни в коей мере не считаю этот вариант лучшим, просто делюсь опытом.

Answer 2

[Stanislav6]

Во-первых, убрать обрезку в настройках:
Внешний вид > Настроить > WooCommerce > Изображения товаров > без обрезки

Ну и CSS:

.img-wrapper {
	position: relative;
	width: 100%;
	overflow: hidden;
	padding-bottom: 100%; //это квадратное изображение
	padding-bottom: 50%; //это прямоугольное изображение в соотношении 2 к 1
	aspect-ratio: 1 / 1; //это квадратное изображение
	aspect-ratio: 2 / 1; //это прямоугольное изображение в соотношении 2 к 1
}

img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}