Сообщений в теме: 11

[Dmitry Krylov]

Очень некрасиво обрезаются картинки товаров

http://atiko.kz/test/category/vesy-2

При выводе тизера используется элемент Image.

При этом картинки товаров будут и широкие и высокие и даже маленькие и большие.

Желательно чтобы картинка сжималась до нужной ширины и вертикально выравнивалась по центру.

Есть какие-то варианты?

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

• 

[ripcord]

Есть один надежный способ

[Dmitry Krylov]

Есть один надежный способ

Как применить этот способ на моем сайте? Я добавил код в CSS, что еще нужно чтобы заработало? Судя по скриншотам это именно то что нужно! 

[ripcord]

Для начала уберите жесткое ограничение размеров изображений где-то в настройках шаблона вывода категорий.

Они уже обрезаны где-то до 186X186 px

Сообщение отредактировал ripcord: 30 May 2014 - 17:35

[Dmitry Krylov]

Для начала уберите жесткое ограничение размеров изображений где-то в настройках шаблона вывода категорий.

Они уже обрезаны где-то до 186X186 px

Убрал, добавил в CSS этот код:

.item-body .item-image {
  width: 186px;
  height: 186px;
  overflow: hidden;
  position: relative;
}
 
.item-body IMG.jbimage {
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  position: absolute;
}
 
.item-body IMG {
  width: auto;
  max-height: 100%;
}

Что то очень странное получилось 

http://atiko.kz/test/category/vesy-2

[ripcord]

Для айтемов добавьте

.jbzoo-item-teaser .item-image
{
	width: 100px;
	height: 100px;
	overflow: hidden;
	position: relative;
}
.jbzoo-item-teaser .align-left IMG
{
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	position: absolute;
}
.jbzoo-item-teaser .align-left IMG
{
	width: auto;
	max-height: 100%;
}

станет

 

[ripcord]

для категорий добавьте

.jbzoo-view-category .subcategory-image
{
	overflow: hidden;
	position: relative;
	width: 195px;
	height: 195px;
}
.jbzoo-view-category .subcategory-image A IMG
{
	bottom: 0;
	display: table;
	left: 0;
	margin: auto;
	position: absolute;
	right: 0;
	top: 0;
}
.jbzoo-view-category IMG
{
	width: auto;
	max-height: 100%;
}

получится

 

 

 

Вы так хотели?

[Dmitry Krylov]

C айтемами вроде всё и так в порядке, беда с подкатегориями

http://atiko.kz/test/category/vesy-2

 

для категорий добавьте

.jbzoo-view-category .subcategory-image
{
	overflow: hidden;
	position: relative;
	width: 195px;
	height: 195px;
}
.jbzoo-view-category .subcategory-image A IMG
{
	bottom: 0;
	display: table;
	left: 0;
	margin: auto;
	position: absolute;
	right: 0;
	top: 0;
}
.jbzoo-view-category IMG
{
	width: auto;
	max-height: 100%;
}

получится

 

 

 

Вы так хотели?

 

ДА! Всё прекрасно выглядит! Спасибо!

В итоге добавлен вот такой код в CSS:

.jbzoo-view-category .subcategory-image
{
	overflow: hidden;
	position: relative;
	width: 195px;
	height: 195px;
}
.jbzoo-view-category .subcategory-image A IMG
{
	bottom: 0;
	display: table;
	left: 0;
	margin: auto;
	position: absolute;
	right: 0;
	top: 0;
}
.jbzoo-view-category IMG
{
	width: auto;
	max-height: 100%;
}

.jbzoo-item-teaser .item-image
{
	width: 100px;
	height: 100px;
	overflow: hidden;
	position: relative;
}
.jbzoo-item-teaser .align-left IMG
{
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	position: absolute;
}
.jbzoo-item-teaser .align-left IMG
{
	width: auto;
	max-height: 100%;
}

И категории и айтемы выглядят прекрасно, при всей своей разности размеров и пропорций! Спасибо ripcord

Сообщение отредактировал Dmitry Krylov: 30 May 2014 - 17:57

[ripcord]

C айтемами вроде всё и так в порядке, беда с подкатегориями http://atiko.kz/test/category/vesy-2

 

По Вашей ссылке все как надо, и с айтемами, и с категориями.

 

 

И категории и айтемы выглядят прекрасно, при всей своей разности размеров и пропорций! Спасибо ripcord

 

На здоровье )

Сообщение отредактировал ripcord: 30 May 2014 - 17:59

[Dmitry Krylov]

По Вашей ссылке все как надо, и с айтемами, и с категориями.

А теперь от этого на главной картинки чуть съехали, как исправить чтобы и там осталось красиво, и на главной стало ровно как раньше было?

http://atiko.kz/test

Сообщение отредактировал Dmitry Krylov: 30 May 2014 - 17:59