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


Изображения По-Разному Отображаются В Разных Браузерах

Изображение по-разному отобра

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

#1 customer8765

customer8765

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

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

Отправлено 07 Ноябрь 2015 - 20:23

Ссылка на описание товара:

http://sidimudobno.s...mod_id=87846745

В описании присутствуют несколько картинок, в том числе картинка с двумя скелетами. Её размер - 600х397

В Chrome все отображается корректно.

В IE и Firefox картинка со скелетами увеличена примерно в 2 раза. Причем только эта, остальные отображаются корректно.

Плюс в IE и Firefox маленькие дополнительные изображения товара сплющены.

Тема "Лето".

#2 Danil

Danil

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

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

Отправлено 09 Ноябрь 2015 - 18:33

Просмотр сообщенияcustomer8765 (07 Ноябрь 2015 - 20:23) писал:

Ссылка на описание товара:

http://sidimudobno.s...mod_id=87846745

В описании присутствуют несколько картинок, в том числе картинка с двумя скелетами. Её размер - 600х397

В Chrome все отображается корректно.

В IE и Firefox картинка со скелетами увеличена примерно в 2 раза. Причем только эта, остальные отображаются корректно.

Плюс в IE и Firefox маленькие дополнительные изображения товара сплющены.

Тема "Лето".
Здравствуйте.
Попробуйте сделать следующее:
в main.css найдите код
img {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
	border: 0;
}
и замените на

img {
	max-width: 100% !important;
	height: auto;
	vertical-align: middle;
	border: 0;
}


#3 customer8765

customer8765

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

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

Отправлено 10 Ноябрь 2015 - 01:18

Просмотр сообщенияDanil (09 Ноябрь 2015 - 18:33) писал:

Здравствуйте.
Попробуйте сделать следующее:
в main.css найдите код
img {
max-width: 100%;
height: auto;
vertical-align: middle;
border: 0;
}
и замените на

img {
max-width: 100% !important;
height: auto;
vertical-align: middle;
border: 0;
}

Спасибо. Не помогло.

#4 Danil

Danil

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

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

Отправлено 10 Ноябрь 2015 - 09:14

Просмотр сообщенияcustomer8765 (10 Ноябрь 2015 - 01:18) писал:

Спасибо. Не помогло.
Из main.css удалите 3 строки
.IE img {width: 100%;}
.Firefox img {width: 100%;}
.Opera img {width: 100%;}


#5 customer8765

customer8765

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

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

Отправлено 11 Ноябрь 2015 - 00:08

Просмотр сообщенияDanil (10 Ноябрь 2015 - 09:14) писал:

Из main.css удалите 3 строки
.IE img {width: 100%;}
.Firefox img {width: 100%;}
.Opera img {width: 100%;}

Спасибо. Помогло.

#6 customer8765

customer8765

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

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

Отправлено 01 Декабрь 2015 - 01:31

Просмотр сообщенияDanil (10 Ноябрь 2015 - 09:14) писал:

Из main.css удалите 3 строки
.IE img {width: 100%;}
.Firefox img {width: 100%;}
.Opera img {width: 100%;}

Обнаружился еще один косяк.
Если удалить эти строки, то окно отображения картинок на карточке товара в случае достаточно широкой картинки будет перекрывать описание товара (проверял в Firefox и IE).
А при отображении картинок в каталоге окно залезет на соседний товар.
А если строки оставить, перекрывать не будет, но проблема останется.
Скриншоты, иллюстрирующие оба варианта, прилагаю.

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

  • var1.jpg
  • var1_2.jpg
  • var2.jpg


#7 Danil

Danil

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

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

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

Просмотр сообщенияcustomer8765 (01 Декабрь 2015 - 01:31) писал:

Обнаружился еще один косяк.
Если удалить эти строки, то окно отображения картинок на карточке товара в случае достаточно широкой картинки будет перекрывать описание товара (проверял в Firefox и IE).
А при отображении картинок в каталоге окно залезет на соседний товар.
А если строки оставить, перекрывать не будет, но проблема останется.
Скриншоты, иллюстрирующие оба варианта, прилагаю.
Здравствуйте.
Изменения Вам произвели, проверьте.

#8 customer8765

customer8765

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

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

Отправлено 03 Декабрь 2015 - 12:06

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

Здравствуйте.
Изменения Вам произвели, проверьте.

Спасибо, вроде отображается нормально. А какие это изменения? я сейчас одновременно делаю еще один магазин с темой Лето, там та же проблема.
Как мне перенести изменения туда?

#9 Danil

Danil

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

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

Отправлено 03 Декабрь 2015 - 12:49

Просмотр сообщенияcustomer8765 (03 Декабрь 2015 - 12:06) писал:

Спасибо, вроде отображается нормально. А какие это изменения? я сейчас одновременно делаю еще один магазин с темой Лето, там та же проблема.
Как мне перенести изменения туда?
В конец main.css добавьте
.htmlDataBlock img {
	max-width: 100%;
}


#10 customer8765

customer8765

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

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

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

Просмотр сообщенияDanil (03 Декабрь 2015 - 12:49) писал:

В конец main.css добавьте
.htmlDataBlock img {
max-width: 100%;
}

На самом деле, это не работает, поспешил я. Вот оба варианта, тестирую на одной и той же базе.

Первый вариант - изображения искажены:
http://sidimudobno.s...6745#show_tab_1

Второй вариант: изображения не искажены, но широкое изображение выходит за границу.
http://narasprodage....mod_id=89186745

Уж и не знаю, как вы проверяли.

#11 Danil

Danil

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

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

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

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

На самом деле, это не работает, поспешил я. Вот оба варианта, тестирую на одной и той же базе.

Первый вариант - изображения искажены:
http://sidimudobno.s...6745#show_tab_1

Второй вариант: изображения не искажены, но широкое изображение выходит за границу.
http://narasprodage....mod_id=89186745

Уж и не знаю, как вы проверяли.
На обоих сайтах отмените изменения из сообщения 4.
Далее в main.css найдите код
.htmlDataBlock img {
max-width: 100%;
}
и замените на

.htmlDataBlock img {
max-width: 100%;
width:auto;
}


#12 customer8765

customer8765

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

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

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

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

На обоих сайтах отмените изменения из сообщения 4.
Далее в main.css найдите код
.htmlDataBlock img {
max-width: 100%;
}
и замените на

.htmlDataBlock img {
max-width: 100%;
width:auto;
}

Но при этом на карточке товара сплюснуты маленькие изображения под окном просмотра товара и изображения в блоке "С этим товаром смотрят"! у вас это не наблюдается?

#13 Юля123

Юля123

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

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

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

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

Но при этом на карточке товара сплюснуты маленькие изображения под окном просмотра товара и изображения в блоке "С этим товаром смотрят"! у вас это не наблюдается?

Здравствуйте, попробуйте следующее:

в main.css после кода:

.IE img {width: 100%;}

добавьте код:

.IE .goods-image-icon {max-height:none !important;}


#14 customer8765

customer8765

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

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

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

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

Здравствуйте, попробуйте следующее:

в main.css после кода:

.IE img {width: 100%;}

добавьте код:

.IE .goods-image-icon {max-height:none !important;}

http://narasprodage....Kolennye-stulya
http://narasprodage....mod_id=89186745

#15 Ирина345

Ирина345

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

  • Модераторы
  • 5 709 сообщений

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

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


Здравствуйте, в конец main.css добавьте
.Firefox .products-grid .item .product-hover .product-image img {
   width: auto !important;
	display: block;
	margin: 0px auto;
}
.IE .products-grid .item .product-hover .product-image img {
   width: auto !important;
	display: block;
	margin: 0px auto;
}


#16 customer8765

customer8765

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

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

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

Просмотр сообщенияИрина345 (03 Декабрь 2015 - 17:52) писал:

Здравствуйте, в конец main.css добавьте
.Firefox .products-grid .item .product-hover .product-image img {
width: auto !important;
display: block;
margin: 0px auto;
}
.IE .products-grid .item .product-hover .product-image img {
width: auto !important;
display: block;
margin: 0px auto;
}

http://narasprodage....mod_id=89186745

Только в Chrome нормально.
В IE маленькие изображения под окном просмотра товара разной высоты.
В Firefox маленькие изображения под окном просмотра товара сплющены, изображения в блоке "Вы смотрели" тоже:
http://narasprodage....Kolennye-stulya

#17 Vaccina

Vaccina

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

  • Модераторы
  • 24 353 сообщений

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

В main.css найдите:
.thumblist-box .thumblist li a img {
	max-width: 100%;
}

попробуйте заменить на:
.thumblist-box .thumblist li a img {
	max-width: 100%;
	max-height: 70px;
	width: auto;
}


#18 customer8765

customer8765

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

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

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

Просмотр сообщенияVaccina (04 Декабрь 2015 - 04:27) писал:

В main.css найдите:
.thumblist-box .thumblist li a img {
max-width: 100%;
}

попробуйте заменить на:
.thumblist-box .thumblist li a img {
max-width: 100%;
max-height: 70px;
width: auto;
}

В Firefox изображения в блоке "Вы смотрели" сплющены
http://narasprodage....Kolennye-stulya

#19 RayLi

RayLi

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

  • Модераторы
  • 2 864 сообщений

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

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

В Firefox изображения в блоке "Вы смотрели" сплющены
http://narasprodage....Kolennye-stulya

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

.Firefox img {
	width: 100%;
}

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

.Firefox img {
	width: 80%;
}


#20 customer8765

customer8765

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

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

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

Вроде не сплющены больше. Скажите, а эти 80%- это точное значение, или на глазок?




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

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