Задать вопрос
@lyaba_chelyaba

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

Как убрать обрезание миниатюр в woocommerce?
64400abac607d688802873.png
страница сайта
  • Вопрос задан
  • 244 просмотра
Подписаться 1 Простой 1 комментарий
Пригласить эксперта
Ответы на вопрос 2
YBB
@YBB
Мы в свое время после разных маневров пришли к выводу, что проще и дешевле заранее готовить квадратные картинки. Ни в коей мере не считаю этот вариант лучшим, просто делюсь опытом.
Ответ написан
Комментировать
@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;
}
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы