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

[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 сказал:

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

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