Перейти к содержимому


Выравнивание Картинок В Каталоге Товара


  • Авторизуйтесь для ответа в теме
Сообщений в теме: 9

#1 Imlies

Imlies

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 65 сообщений

Отправлено 19 Ноябрь 2015 - 13:47

Здравствуйте! Сейчас у нас на сайте в каталоге товаров картинки товара приклеиваются верхней границей к названию товара. Как сделать, чтобы они выравнивались по центру "плитки" с товаром? Просто делать для каждой картинки квадратные "рамки" немного несподручно. Хотелось бы, чтобы прямоугольные картинки выравнивались по центру сами.

Прикрепленные изображения

  • tlmx.jpg


#2 Firefly

Firefly

    Активный участник

  • Модераторы
  • 3 810 сообщений

Отправлено 19 Ноябрь 2015 - 17:39

Просмотр сообщенияImlies (19 Ноябрь 2015 - 13:47) писал:

Здравствуйте! Сейчас у нас на сайте в каталоге товаров картинки товара приклеиваются верхней границей к названию товара. Как сделать, чтобы они выравнивались по центру "плитки" с товаром? Просто делать для каждой картинки квадратные "рамки" немного несподручно. Хотелось бы, чтобы прямоугольные картинки выравнивались по центру сами.

Здравствуйте.
По данному вопросу консультировали по телефону.

#3 Imlies

Imlies

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 65 сообщений

Отправлено 02 Декабрь 2015 - 10:20

Просмотр сообщенияFirefly (19 Ноябрь 2015 - 17:39) писал:

Здравствуйте.
По данному вопросу консультировали по телефону.

Здравствуйте! Теперь появилась другая проблема - картинки выравниваются по левому краю. Можно ли как-нибудь сделать, чтобы изображения любых пропорций выравнивались строго по центру?

#4 Firefly

Firefly

    Активный участник

  • Модераторы
  • 3 810 сообщений

Отправлено 02 Декабрь 2015 - 11:17

Просмотр сообщенияImlies (02 Декабрь 2015 - 10:20) писал:

Здравствуйте! Теперь появилась другая проблема - картинки выравниваются по левому краю. Можно ли как-нибудь сделать, чтобы изображения любых пропорций выравнивались строго по центру?

Здравствуйте.
Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css, найдите код:
#content .box .tabproduct .img { margin:5px 0 0 0; min-height:165px; max-height:165px; height:165px; vertical-align: middle; display: table-cell; }

Замените на:
#content .box .tabproduct .img { margin:5px 0 0 0; min-height:165px; max-height:165px; height:165px; vertical-align: middle; display: table-cell; padding-left: 5px;}

Найдите код:
#content .box3 .tabproduct .img { margin:5px 0 0 0; min-height:165px; max-height:165px; height:165px;vertical-align: middle; display: table-cell; }

Замените на:
#content .box3 .tabproduct .img { margin:5px 0 0 0; min-height:165px; max-height:165px; height:165px;vertical-align: middle; display: table-cell; padding-left: 5px;}


#5 Imlies

Imlies

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 65 сообщений

Отправлено 02 Декабрь 2015 - 11:37

Просмотр сообщенияFirefly (02 Декабрь 2015 - 11:17) писал:

Здравствуйте.
Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css, найдите код:
#content .box .tabproduct .img { margin:5px 0 0 0; min-height:165px; max-height:165px; height:165px; vertical-align: middle; display: table-cell; }

Замените на:
#content .box .tabproduct .img { margin:5px 0 0 0; min-height:165px; max-height:165px; height:165px; vertical-align: middle; display: table-cell; padding-left: 5px;}

Найдите код:
#content .box3 .tabproduct .img { margin:5px 0 0 0; min-height:165px; max-height:165px; height:165px;vertical-align: middle; display: table-cell; }

Замените на:
#content .box3 .tabproduct .img { margin:5px 0 0 0; min-height:165px; max-height:165px; height:165px;vertical-align: middle; display: table-cell; padding-left: 5px;}

На тех товарах, у которых картинка узкая, но высокая, не помогло. Они все еще по левому краю располагаются.

#6 Firefly

Firefly

    Активный участник

  • Модераторы
  • 3 810 сообщений

Отправлено 02 Декабрь 2015 - 13:56

Просмотр сообщенияImlies (02 Декабрь 2015 - 11:37) писал:

На тех товарах, у которых картинка узкая, но высокая, не помогло. Они все еще по левому краю располагаются.

Попробуйте тогда так:
Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css, найдите код:
	#content .box .tabproduct .img { margin:5px 0 0 0; min-height:165px; max-height:165px; height:165px; vertical-align: middle; display: table-cell; padding-left: 5px;}

Замените на:
	#content .box .tabproduct .img { margin:5px 0 0 0; min-height:165px; max-height:165px; height:165px; vertical-align: middle;}

Найдите код:
	#content .box3 .tabproduct .img { margin:5px 0 0 0; min-height:165px; max-height:165px; height:165px;vertical-align: middle; display: table-cell; padding-left: 5px;}

Замените на:
	#content .box3 .tabproduct .img { margin:5px 0 0 0; min-height:165px; max-height:165px; height:165px;vertical-align: middle;}


#7 Imlies

Imlies

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 65 сообщений

Отправлено 02 Декабрь 2015 - 14:32

Просмотр сообщенияFirefly (02 Декабрь 2015 - 13:56) писал:

Попробуйте тогда так:
Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css, найдите код:
#content .box .tabproduct .img { margin:5px 0 0 0; min-height:165px; max-height:165px; height:165px; vertical-align: middle; display: table-cell; padding-left: 5px;}

Замените на:
#content .box .tabproduct .img { margin:5px 0 0 0; min-height:165px; max-height:165px; height:165px; vertical-align: middle;}

Найдите код:
#content .box3 .tabproduct .img { margin:5px 0 0 0; min-height:165px; max-height:165px; height:165px;vertical-align: middle; display: table-cell; padding-left: 5px;}

Замените на:
#content .box3 .tabproduct .img { margin:5px 0 0 0; min-height:165px; max-height:165px; height:165px;vertical-align: middle;}

Вы мне вернули все в то состояние, в котором все было изначально - теперь они "приклеены" к верхнему краю блока =). Можно ли как-то сделать, чтобы картинки не приклеивались ни к одной из сторон блока с товаром, а располагались по центру с равными отступами и сверху/снизу и с боков?

#8 Alekseys

Alekseys

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 2 355 сообщений

Отправлено 02 Декабрь 2015 - 15:23

Просмотр сообщенияImlies (02 Декабрь 2015 - 14:32) писал:

Вы мне вернули все в то состояние, в котором все было изначально - теперь они "приклеены" к верхнему краю блока =). Можно ли как-то сделать, чтобы картинки не приклеивались ни к одной из сторон блока с товаром, а располагались по центру с равными отступами и сверху/снизу и с боков?
Здравствуйте. В main.css замените
#content .box3 .tabproduct .img img { max-width:165px; max-height:165px; position:relative; z-index:31;}
на
#content .box3 .tabproduct .img img { max-width:165px; max-height:165px; position:relative; z-index:31; margin-top: 12px;}
и отредактируйте отступ фото сверху в  margin-top: 12px;.

#9 Imlies

Imlies

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 65 сообщений

Отправлено 02 Декабрь 2015 - 15:40

Просмотр сообщенияAlekseys (02 Декабрь 2015 - 15:23) писал:

Здравствуйте. В main.css замените
#content .box3 .tabproduct .img img { max-width:165px; max-height:165px; position:relative; z-index:31;}
на
#content .box3 .tabproduct .img img { max-width:165px; max-height:165px; position:relative; z-index:31; margin-top: 12px;}
и отредактируйте отступ фото сверху в  margin-top: 12px;.

Здравствуйте! Прошу прощения, что мучаю вас, просто у нас на сайте есть картинки с разными пропорциями и сделав отступ у одних, я неизбежно "поломаю" другие. Цель - сделать так, чтобы разные картинки с разными пропорциями центрировались в блоке. Такое возможно сделать? Просто я сейчас могу настроить отступ, например у горизонтальных прямоугольных картинок так, чтобы они были по центру, но тогда картинки, у которых высота больше, съедут вниз за границы блока. Тоже самое и при отступе слева или справа - если картинка высокая, но узкая, то ее можно отцентрировать отступом от края, но тогда квадратные картинки с большей шириной уползут вбок за границы блока с товаром.

#10 Alekseys

Alekseys

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 2 355 сообщений

Отправлено 02 Декабрь 2015 - 16:04

Просмотр сообщенияImlies (02 Декабрь 2015 - 15:40) писал:

Здравствуйте! Прошу прощения, что мучаю вас, просто у нас на сайте есть картинки с разными пропорциями и сделав отступ у одних, я неизбежно "поломаю" другие. Цель - сделать так, чтобы разные картинки с разными пропорциями центрировались в блоке. Такое возможно сделать? Просто я сейчас могу настроить отступ, например у горизонтальных прямоугольных картинок так, чтобы они были по центру, но тогда картинки, у которых высота больше, съедут вниз за границы блока. Тоже самое и при отступе слева или справа - если картинка высокая, но узкая, то ее можно отцентрировать отступом от края, но тогда квадратные картинки с большей шириной уползут вбок за границы блока с товаром.
Нет, при таких условиях реализовать центровку невозможно. Одинаково фото будут отображены лишь в том случае, если они будут одного формата, либо будут растянуты/сжаты по форме рамки, что приведет к искажению самих фото.




Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных