Перейти к содержанию
DrKiLL

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

Рекомендуемые сообщения

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

К примеру:

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

В CSS:

.adaptivochka {

width:100%;

height:auto;

}

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
25 минут назад, Tom сказал:

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

 

$(document).ready(function(){

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

});

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
2 минуты назад, DrKiLL сказал:

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
5 минут назад, florapraktik сказал:

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
@media (max-width: 500px) {
#tab-description img{width: 100%;}
}

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
15 минут назад, DrKiLL сказал:

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

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

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

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

img {

        max-width: 100%;

}

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

 

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

Изменено пользователем florapraktik

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Изменено пользователем Normand

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
В 01.02.2017 в 13:27, Tom сказал:

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

http://joxi.ru/5mdnoKvtE0zkA1

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

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

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

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

6503107558.jpg

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
On 13.04.2017 at 3:53 PM, Tom said:

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


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

 

 

 

Спасибо 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

 

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

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

Изменено пользователем Sinpak

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.