Добрый вечер!
При заходе с мобильного на карточки товара сплющивает некоторые картинки, получается вот так:
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", это так сказать "не по феншую" :)
И использовать его можно, только если не сможете убрать значения высоты и ширины вручную.
Да, теперь работает корректно, спасибо большое!!
Да, теперь работает корректно, спасибо большое!!
Рад был помочь.