Адаптивные изображения в описании товара

[DrKiLL]

Использую последнюю версию русской Opencart, вставляю статью в редактор Summernote, всё супер всё схватывает, всё хорошо смотрится на компьютере, но если разрешение экрана меньше изображения в описании не уменьшаются, текст подстраивается, а изображения всегда одного размера. Кто подскажет что можно сделать?

[cloudrc]

Задавайте этим изображениям ширину 100% и высоту auto.

К примеру:

<img class="adaptivochka" src="trololo.jpg">

В CSS:

.adaptivochka {

width:100%;

height:auto;

}

[Tom]

http://www.w3schools.com/bootstrap/bootstrap_ref_css_images.asp

.img-responsive

[cloudrc]

Хотя у Tom'а решение получше гораздо, в bootstrap так и не залез я еще (

[DrKiLL]

25 минут назад, Tom сказал:

http://www.w3schools.com/bootstrap/bootstrap_ref_css_images.asp

.img-responsive

Спасибо огромное, а можно как то сделать добавление класса для всех рисунков? Например я копирую статью с 10ю картинками, каждой добавлять класс проблемно.

[Tom]

Вариантов много.Попробуйте скрипт добавить в файл который выводит ваши картинки,что то типа

 

$(document).ready(function(){

    $("img").addClass("img-responsive");

});

 

[florapraktik]

2 минуты назад, DrKiLL сказал:

Например я копирую статью с 10ю картинками, каждой добавлять класс проблемно.

Вряд-ли подскажу - мне для себя интересно, - а как именно Вы это делаете? Как, по какому сценарию, Вы выводите текст на сайт? По какому сценарию Вы выводите картинки.

Просто, у меня картинки как бы сами уменьшаются и специально класс респонсив я не подставляю.

[n3bo]

Можно задать максимальную ширину содержимого контента.

[DrKiLL]

5 минут назад, florapraktik сказал:

Вряд-ли подскажу - мне для себя интересно, - а как именно Вы это делаете? Как, по какому сценарию, Вы выводите текст на сайт? По какому сценарию Вы выводите картинки.

Просто, у меня картинки как бы сами уменьшаются и специально класс респонсив я не подставляю.

картинка в описании товара? у меня не работает, даже если вставляю картинку из своего хранилища. На смартфоне проверяли?

[mazein]

@media (max-width: 500px) {
#tab-description img{width: 100%;}
}

Значение max-width подогнать экспериментально.

[florapraktik]

15 минут назад, DrKiLL сказал:

картинка в описании товара? у меня не работает, даже если вставляю картинку из своего хранилища. На смартфоне проверяли?

В любом месте. Например, тексте описания для категории, Там картинка. Она уменьшается сама, вез всяких классов.

Не надо "на смартфоне" - просто мышкой двигаю ширину окна браузера - картинка уменьшается-увеличивается.

В принципе, в stylesheet.css есть такие буквы:

img {

        max-width: 100%;

}

Картинки должны сами по себе быть резиновыми, без танцев и бубнов, Мне так кажется....

 

И всё-таки, как Вы публикуете контент? По какому сценарию?

Изменено 1 февраля 2017 пользователем florapraktik

[Tom]

Скрипт что я дал выше не помог?

[Normand]

Не так давно ругался с верстальщиком именно по этому вопросу. Он мне все изображения сунул как адаптивные, что я считаю не есть хорошо. поясню почему. Вы хотите чтоб ваш клиент сидя в метро или в автобусе, где скорость постоянно скачет туда сюда и каждый Кб ждет когда же загрузится ваше адаптивное изображение. Но товар настолько ценен и он не дождавшись загрузки идет домой, открывает там ваш сайт и снова пытается посмотреть ... ну сценарий из области фантастики скорее всего. По этому я требовал от верстальщика, чтоб было нарезано 3 разные группы изображений, а самые мелкие были вбиты в base64. Тем самым шансы, что человек ткнет пальцем, купить именно сейчас намного выше чем через какой то промежуток времени. По этому советую продумать этот момент изначально. Думаю тут все в лень упирается. Я все к тому, что будьте осторожнее с адаптивностью изображений на мобилках.

Изменено 1 февраля 2017 пользователем Normand

[vermilionn]

В 01.02.2017 в 13:27, Tom сказал:

http://www.w3schools.com/bootstrap/bootstrap_ref_css_images.asp

.img-responsive

Я добавил данный класс через редактор CKEditor, да - изображения уменьшились до размера мобильного экрана, но они уменьшились непропорционально, прямоугольные изображения стали вообще уродские, как будто  "сдавлены прессом".Что я делаю не так ?

[Tom]

Без ссылки на проблему,только гадалки помогут.

[vermilionn]

http://vozduh2y.beget.tech/domvent например здесь и сразу еще хотелось бы уточнить по поводу таблиц, там тоже можно применять такой же класс? Просто происходит тоже не пропорциональное уменьшение и плюс какая то линия справа таблицы появляется  сразу.

[Tom]

Убирайте у картинок  значение ширины и высоты.

style="height:...px; width:....px"

http://joxi.ru/5mdnoKvtE0zkA1

тоже самое в таблицах

плюс используйте классы для bootstrap

http://getbootstrap.com/css/#tables

Скрытый текст

 

[vermilionn]

Так, если я убераю эти значения картинка сразу же увеличивается до изначальных размеров. Просто я картинки уменьшал средствами, редактора задавал им определенное значение. Получается картинки нужно сразу нарезать того размера который нужен,не уменьшая в редакторе, и  задавать этот класс, правильно я понял?

[rus66]

On 13.04.2017 at 3:53 PM, Tom said:

Убирайте у картинок  значение ширины и высоты.

style="height:...px; width:....px"

 

 

 

Спасибо 

[Sinpak]

 

В 01.02.2017 в 13:27, Tom сказал:

http://www.w3schools.com/bootstrap/bootstrap_ref_css_images.asp

.img-responsive

Ай спасибо за ссылочку))

Изменено 21 февраля 2018 пользователем Sinpak

[Marianna]

В 01.02.2017 в 12:58, Tom сказал:

Вариантов много.Попробуйте скрипт добавить в файл который выводит ваши картинки,что то типа

 

$(document).ready(function(){

    $("img").addClass("img-responsive");

});

 

в этот скрипт еще нужно добавить размер экрана мобильных, иначе оно применяется и для компов

[Tom]

И что не так ?

[Marianna]

В 09.10.2019 в 11:57, Tom сказал:

И что не так ?

надо как-то придумать чтобы в ckeditor автоматом класс лепился при добавлении изображения.

[Tom]

Так этот инструмент называется  - руки.

[Marianna]

4 часа назад, Tom сказал:

Так этот инструмент называется  - руки.

в каждое фото? если уже куча статей. бррр