2

Помогите пожалуйста. Интернет магазин сделан на движке WP с плагином woocomerce. Помогает только если загружать фото одного размера, но это не всегда возможно и когда фото не одинакового размера, товары начинают съезжать. В этом деле новичок и не разбираюсь с стилями. Может кто сталкивался с такой проблемой. Хочется что бы цены были вровень , не в зависимости от размера фото. Буду очень благодарен за помощь.введите сюда описание изображения

5
  • Это сильно зависит от темы, нужно видеть верстку html/css 6 фев 2018 в 17:07
  • 3
    ВСЕГДА возможно (и даже нужно) подготавливать фото одинакового размера.
    – SeVlad
    6 фев 2018 в 17:22
  • "ВСЕГДА возможно (и даже нужно) подготавливать фото одинакового размера." Это же бред! Если на проекте нет контент менеджеров, то никто не будет подготавливать нужные размеры. Тут либо писать кроппер на серваке либо стилями резать 6 фев 2018 в 20:30
  • Это не бред, а зачем тогда такой магазин, который не нуждается в контент-менеджерах и тупо парсит картинки без обработки. Такого шлака полно в интернете, хотите качество - работайте. Можно стилями, но попадется маленькая картинка и её просто поплющит. Да, стили должны быть - это однозначно, но о качестве контента тоже нужно заботиться. 7 фев 2018 в 13:28
  • @babymills И вообще изображения товаров для каталогов и карт товаров ОБЯЗАНЫ БЫТЬ ОДИНАКОВЫХ РАЗМЕРОВ!!! Ну потратьте вы 2 минуты жизни, подготовьте изображения!
    – Kirill
    8 фев 2018 в 6:59

3 ответа 3

2

Как вариант, задать обертку для картинок с фиксированными размерами. И сделать изображение responsive: добавить стиль к изображению (display: block; max-width: 100%; height: auto;)

<div style="width: 300px; height: 300px; overflow: hidden;">
  <img style="display: block; max-width: 100%; height: auto;" src="Ваше изображение" alt="" />
</div>

По поводу стилей для обертки: width: 300px; height: 300px; overflow: hidden; width - должно совпадать с шириной блока height: указывать размер совпадающий с шириной блока (в данном случае 300px) overflow: hidden - убирать все что выходит за рамки указанных размеров блока

1

Если блоки товаров фиксированной высоты, просто можно прижать блок с ценой к низу, сделав его absolute и спозиционировав, как вариант.

Уточняю. Делаем блок карточки товара () фиксированной высоты, например, 300px, делаем ей position: relative. Блоку, где находится цена делаем position: absolute и свойством top прижимаем к низу блока. Таким образом, если размер картинки меньше нужного, цена все равно будет везде одинаково. Максимальный размер картинки придется ограничивать, тем не менее

0
1

Решал подобную задачу в магазине обуви - где часть фото горизонтально часть вертикально. При парсинге нереально обработать все 1000+ фото одинаково если они с разных магазинов. Для этого: Для списка товаров определяем нужный или близкий нам размер, меньше которого нужно растянуть блок. Остальные фото визуально выравниваем под этот размер если фото ниже то его центрирует вертикально/горизонтально.

Оборачиваем фото списка товара в свой Див:

function img_top_prew()
{echo '<div class="imgcat">';}; 
add_action( 'woocommerce_before_shop_loop_item', 'img_top_prew', 10 );
function img_top_bottom()
{echo '</div>';}; 
add_action( 'woocommerce_before_shop_loop_item_title', 'img_top_bottom', 10);

 Стили
.imgcat {
 min-height: 266px;
 position: relative;
}
.imgcat img {
    vertical-align: middle;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}

И получаем вместо такого введите сюда описание изображения

Визуально все ровные фото товаров. Следовательно с этим подровняет и названия товаров, цены и все что ниже под фото.

введите сюда описание изображения

2
  • тезка, твой пример с сапогами - бомбический, здоровья и профессиональных успехов... но уменьшились превьюшки в карточке самого товара до микроскопических размеров, можешь подсказать - куда копать? 28 июн 2018 в 15:03
  • Надо смотреть через дебаггер какая у Вас обертка карточки товара и стили к ней, тогда станет ясно что ограничивает высоту/ширину блока. 5 июл 2018 в 10:38

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.