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

[Andrew S.]

Добрый день!

Сразу проиллюстрирую:


Размеры фото прыгают туда-сюда.


Помогите сделать так, чтобы размер блока под каждое фото был всегда одинаковый, а фото всегда стояло в этом блоке по центру:

[RayLi]

Andrew S. (30 Январь 2015 - 12:55) писал:

Добрый день!

Сразу проиллюстрирую:

Foto_tovarov_1.png
Размеры фото прыгают туда-сюда.
Foto_tovarov_2.png

Помогите сделать так, чтобы размер блока под каждое фото был всегда одинаковый, а фото всегда стояло в этом блоке по центру:

Foto_tovarov_3.png

Попробуйте сделать следующее:
В шаблоне main.css найдите код:

img {
max-width: 100%;
}

И замените его вот этим кодом:

img {
max-width: 100%;
min-width: 100%;
}

[Andrew S.]

RayLi (30 Январь 2015 - 13:11) писал:

Попробуйте сделать следующее:
В шаблоне main.css найдите код:

img {
max-width: 100%;
}

И замените его вот этим кодом:

img {
max-width: 100%;
min-width: 100%;
}

Колдун!

Вот только проблема опять ((

В Товаре фото стало растянутое:



Помогите исправить.

[RayLi]

Andrew S. (30 Январь 2015 - 14:09) писал:

Колдун!

Вот только проблема опять ((

В Товаре фото стало растянутое:

Rastyanutoe.png

Помогите исправить.

Попробуйте сделать следующее:
В шаблоне main.css добавьте код:

img.lazyOwl.firstBigGoodsImg {
max-width: 100%;
min-width: 50%;
}

[Andrew S.]

И ещё проблема..

Логотип стал огромным:



И фото на категориях товаров растянулись

[RayLi]

Andrew S. (30 Январь 2015 - 14:22) писал:

И ещё проблема..

Логотип стал огромным:

Razmer.png

И фото на категориях товаров растянулись

В шаблоне main.css найдите код:

.logoblock-left {
display: inline-block;
float: left;
border: 0px solid white;
margin-bottom: -14px;
}

И замените его:

.logoblock-left {
display: inline-block;
float: left;
border: 0px solid white;
margin-bottom: -14px;
width: 25% !important;
}

[Andrew S.]

Для сравнения, как всё было:

RayLi (30 Январь 2015 - 14:24) писал:

В шаблоне main.css найдите код:

.logoblock-left {
display: inline-block;
float: left;
border: 0px solid white;
margin-bottom: -14px;
}

И замените его:

.logoblock-left {
display: inline-block;
float: left;
border: 0px solid white;
margin-bottom: -14px;
width: 25% !important;
}

А что делать с фото в категориях товаров?

Все вторые, третьи и последующие фото - стали и остались растянутыми:



Думал, что всё получилось как надо, а это изменение потянуло всё за собой..

[RayLi]

Andrew S. (30 Январь 2015 - 14:27) писал:

Для сравнения, как всё было:

Kak bylo.png


А что делать с фото в категориях товаров?

Так... А они должны как выглядеть? Уточните, пожалуйста.

[Andrew S.]

RayLi (30 Январь 2015 - 14:31) писал:

Так... А они должны как выглядеть? Уточните, пожалуйста.

Они должны выглядеть такими как были, не растянутыми. Я вложил фото. Можете сравнить. Всё порастягивалось...

[RayLi]

Andrew S. (30 Январь 2015 - 14:33) писал:

Они должны выглядеть такими как были, не растянутыми. Я вложил фото. Можете сравнить. Всё порастягивалось...

Снова в шаблоне main.css найдите код:

.categoriesList .item-box .img {
text-align: center;
display: block;
width: 100%;
height: 130px;
}

И замените его вот этим кодом:

.categoriesList .item-box .img {
text-align: center;
display: block;
width: 100%;
height: 150px;
}

[Andrew S.]

RayLi (30 Январь 2015 - 14:38) писал:

Снова в шаблоне main.css найдите код:

.categoriesList .item-box .img {
text-align: center;
display: block;
width: 100%;
height: 130px;
}

И замените его вот этим кодом:

.categoriesList .item-box .img {
text-align: center;
display: block;
width: 100%;
height: 150px;
}

Пойдёт.. Уже не так, как было, но ладно...

А что делать с уродливыми растянутыми картинками?

[RayLi]

Andrew S. (30 Январь 2015 - 15:01) писал:

Пойдёт.. Уже не так, как было, но ладно...

А что делать с уродливыми растянутыми картинками?

Rast1.png Rast2.png Rast3.png

Попробуйте сделать следующее:
В шаблоне main.css найдите код:

.bigImages img {
height: 100%;
}

И замените его вот этим кодом:

.bigImages img {
max-width: 80%;
min-width: 30%;
}

[Andrew S.]

RayLi (30 Январь 2015 - 15:14) писал:

Попробуйте сделать следующее:
В шаблоне main.css найдите код:

.bigImages img {
height: 100%;
}

И замените его вот этим кодом:

.bigImages img {
max-width: 80%;
min-width: 30%;
}

Плохо.. Всё посмещалось:



Маленькие картинки уползли вверх, большие - вниз...

Можно было изначально блок для фото увеличить? А не фото увеличивать?

Я откачу всё назад. Ушли куда-то не туда.

Есть другой способ решить проблему?

[Andrew S.]

Так.. Предполагаю.. Вижу GoodsListImgBlcok.. Его нельзя задать определённой ширины и высоты? А для фото прописать ориентирование по центру по вертикали и по горизонтали?

[Alekseys]

Andrew S. (30 Январь 2015 - 15:42) писал:

Так.. Предполагаю.. Вижу GoodsListImgBlcok.. Его нельзя задать определённой ширины и высоты? А для фото прописать ориентирование по центру по вертикали и по горизонтали?

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

[Andrew S.]

Alekseys (30 Январь 2015 - 15:49) писал:

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

Окей! Тогда скажите, какой нужно минимальный размер фото заливать, чтобы они все были одинаковые? Перезалью отдельные фото.

[Alekseys]

Andrew S. (30 Январь 2015 - 15:54) писал:

Окей! Тогда скажите, какой нужно минимальный размер фото заливать, чтобы они все были одинаковые? Перезалью отдельные фото.

Ориентируйтесь на размер 315х315 пикселей.