Сплющивает Картинки В Описании В Мобильной Версии

Добрый вечер!

При заходе с мобильного на карточки товара сплющивает некоторые картинки, получается вот так:
https://yadi.sk/i/DYdBCPpyxY5GV
https://yadi.sk/i/NOsAj2FfxY5VA

В чем может быть причина и как исправить?


И еще нюанс по картинкам, можно ли сделать, чтобы в просмоторщике изображений общий фон был одинаковый всегда (к примеру 4:3) вне зависимости от формата изображения и белый фон, ну и чтобы картинки вписывались туда.


Заранее спасибо!

Добрый вечер!

При заходе с мобильного на карточки товара сплющивает некоторые картинки, получается вот так:
https://yadi.sk/i/DYdBCPpyxY5GV
https://yadi.sk/i/NOsAj2FfxY5VA

В чем может быть причина и как исправить?

Скорее всего, у вас задана фиксированная ширина картинки.

И еще нюанс по картинкам, можно ли сделать, чтобы в просмоторщике изображений общий фон был одинаковый всегда (к примеру 4:3) вне зависимости от формата изображения и белый фон, ну и чтобы картинки вписывались туда.

Просмотрщики изображений - это сторонние библиотеки, поэтому их лучше не править самостоятельно.

Добрый вечер!

При заходе с мобильного на карточки товара сплющивает некоторые картинки, получается вот так:
https://yadi.sk/i/DYdBCPpyxY5GV
https://yadi.sk/i/NOsAj2FfxY5VA

В чем может быть причина и как исправить?


И еще нюанс по картинкам, можно ли сделать, чтобы в просмоторщике изображений общий фон был одинаковый всегда (к примеру 4:3) вне зависимости от формата изображения и белый фон, ну и чтобы картинки вписывались туда.


Заранее спасибо!

Да, скорее всего, что у Вас жестко задано ширина картинки.
Попробуйте реализовать следующий код

.нужный_css_селектор_до_изображений{
max-width:100%;
}

Вместо этого "нужный_css_селектор_до_изображений", нужно будет поставить Ваш селектор и изображение должно показываться в пропорциональных размерах.

Да, скорее всего, что у Вас жестко задано ширина картинки.
Попробуйте реализовать следующий код

.нужный_css_селектор_до_изображений{
max-width:100%;
}

Вместо этого "нужный_css_селектор_до_изображений", нужно будет поставить Ваш селектор и изображение должно показываться в пропорциональных размерах.

Благодарю!

Подскажите, пожалуйста, где можно посмотреть селектор изображения ?

Благодарю!

Подскажите, пожалуйста, где можно посмотреть селектор изображения ?

Если у Вас эти изображения во Вкладке "Описание" на странице продукта, то должен помочь этот код

.ty-tabs__content .ty-wysiwyg-content img{
max-width:100%;
}

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

Если у Вас эти изображения во Вкладке "Описание" на странице продукта, то должен помочь этот код

.ty-tabs__content .ty-wysiwyg-content img{
max-width:100%;
}

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

К сожалению не помогло.

Вот ссылка на сайт (одна из страниц, на которой сплющивает) http://duhpoleta.ru/akcii/kvadrokopter-dji-phantom-4-fantom-4/

К сожалению не помогло.

Вот ссылка на сайт (одна из страниц, на которой сплющивает) http://duhpoleta.ru/akcii/kvadrokopter-dji-phantom-4-fantom-4/

Здесь у Вас проблема как раз в том, что у Вас заданы жестко ширина и высота для картинок.
Попробуйте, либо убрать жесткие значения ширины и высоты для картинок.
Либо попробуйте следующий CSS код

@media (max-width: 767px){
.content-description img{
height:auto !important;
width:auto !important;
}
}

Этот код будет применен только для разрешений меньше 767 пикселей.
Также хочу предупредить, что использование "!important", это так сказать "не по феншую" :)
И использовать его можно, только если не сможете убрать значения высоты и ширины вручную.

Здесь у Вас проблема как раз в том, что у Вас заданы жестко ширина и высота для картинок.
Попробуйте, либо убрать жесткие значения ширины и высоты для картинок.
Либо попробуйте следующий CSS код

@media (max-width: 767px){
.content-description img{
height:auto !important;
width:auto !important;
}
}

Этот код будет применен только для разрешений меньше 767 пикселей.
Также хочу предупредить, что использование "!important", это так сказать "не по феншую" :)
И использовать его можно, только если не сможете убрать значения высоты и ширины вручную.

Да, теперь работает корректно, спасибо большое!!

Да, теперь работает корректно, спасибо большое!!

Рад был помочь.