Адаптивная картинка

 
Посетитель
small user social cms
МедальАвторитет форумаПочетный донор проектаКубок зрительских симпатий
Сообщений: 3089
Добрый вечер.
Возник вопрос с адаптивностью картинок.
Задал для картинок в стиле класс max-width: 100%; , Картинка по ширине уменьшается под размер экрана, а вот по высоте не хочет, сжимается и вытягивается, и непропорциональная.
Как сделать что бы уменьшалась с сохранением пропорций? Пробовал и height: auto; и height: 100%; не помогает, может ли быть что то из за так сказать вышестоящего дива? Шаблон дефолт от Токарева
Редактировалось: 1 раз (Последний: 10 апреля 2016 в 19:40)
Посетитель
small user social cms
Медаль
Сообщений: 415
Присоединяюсь. Такая же проблема с статьях. В картинках, вставляемых через bb все адаптивно посредством

.bb_img img {
max-width: 100%;
}

Для статей прописано

.cboxElement img {position:relative;max-width: 100%;} А для высоты ничего не работает, уже много вариантов перепробовано
Реклама
cms
Посетитель
small user social cms
Медаль
Сообщений: 779
img {
width: auto\9;
height: auto;
max-width: 100%;
}
Посетитель
small user social cms
МедальАвторитет форума
Сообщений: 1001
я прописал

Код PHP:
  1. a img {width:100%;}
отлично все помогло

только внимательно нужно, ибо на иконках повылезать может много где

если вылезет, добавьте в стилях

Код PHP:
  1. /* Иконки */
  2. .icons {width:16px; border:0px;}
  3. /* Иконки, окончание */
  4.  
ну, а там, где иконки, например для форума

Код PHP:
  1. <img class="icons" src="/images/markers/rssfeed.png" alt="{$LANG.RSS}"/>
Редактировалось: 2 раз (Последний: 10 апреля 2016 в 20:35)
Комплексный подход к Вашему онлайн-бизнесу: домены, хостинг, сайты.
Продажа качественных доменов.
Посетитель
small user social cms
Медаль
Сообщений: 415
Не работает ни один из предложенных вариантов
Посетитель
small user social cms
МедальАвторитет форумаПочетный донор проектаКубок зрительских симпатий
Сообщений: 3089
У меня не много не стандартная ситуация, у меня к блогам прикручен визуальный редактор, он вставляет картинку просто тегом img,
я прописал так:
.blog-body img {
max-width: 100%;
}
То бишь все картинки что в blog-body занимают всю возможную ширину, а вот по высоте не масштабируется.
Если в консоле снять галочку о высоте то все работает
Адаптивная картинка
Посетитель
small user social cms
МедальКубок зрительских симпатийАвторитет форума
Сообщений: 6473
Jestik:
.blog-body img {
max-width: 100%;
}

А если прописать вот так:

Код PHP:
  1. img {
  2. max-width: 100%;
  3. }
  4.  
То решится проблема везде с растянутыми картинками.
Хостинг и ВПС Халява тексты Стартапы Instantcms в Telegram
Посетитель
small user social cms
МедальАвторитет форума
Сообщений: 1001
al955:
Не работает ни один из предложенных вариантов

все прекрасно работает, у меня так же шаблоны Александра, и на них и на дефолтном все картинки адаптивные
Спойлер
Комплексный подход к Вашему онлайн-бизнесу: домены, хостинг, сайты.
Продажа качественных доменов.
Посетитель
small user social cms
Медаль
Сообщений: 415
Blackman-st:

al955:
Не работает ни один из предложенных вариантов

все прекрасно работает, у меня так же шаблоны Александра, и на них и на дефолтном все картинки адаптивные
[spoiler=Спойлер]
Адаптивная картинка


Адаптивная картинка
[/spoiler]

у вас 1.10.6?
Посетитель
small user social cms
МедальАвторитет форумаПочетный донор проектаКубок зрительских симпатий
Сообщений: 3089
Та в статьях у меня и так все работает и в блогах при использовании бб кодов тоже все работает, а вот при использовании визуального редактора наблюдаются такие проблемы

Адаптивная картинка
Посетитель
small user social cms
МедальАвторитет форума
Сообщений: 1001
al955, да
Комплексный подход к Вашему онлайн-бизнесу: домены, хостинг, сайты.
Продажа качественных доменов.
Посетитель
small user social cms
Медаль
Сообщений: 415
ОК. Надо будет на досуге найти время, поковыряться как следует над этим вопросом
Посетитель
small user social cms
МедальАвторитет форумаКубок зрительских симпатий
Сообщений: 2592
width:100%;
height:auto;
работает однозначно.
Там в коде, видно element-style{ширина, высота.
То есть, ширина задана в самом теге картинки <img src="/..." width="1280" или тут же style="width:1280"
Эта запись имеет приоритет над тем, что указано в styles.css для класса к этой картинке.
Можно пробовать использовать
width:100% !important;
height:auto!important;

Ещё замечаю, что заданные стили могут не срабатывать, и картинка деформируется неправильно, когда имеется таблица. Например два столбца, картинка в левом, а в правом столбце ширина указана в процентах и он сжимает левый столбец и картинку тоже. В правом столбце лучше не указывать ширину вообще. Нужно правильно высчитывать ширину и чётко её указывать или правый столбец не указывать ширину совсем. Это не к данному случаю, так, на заметку.
Редактировалось: 2 раз (Последний: 10 апреля 2016 в 21:45)
Посетитель
small user social cms
МедальАвторитет форумаПочетный донор проектаКубок зрительских симпатий
Сообщений: 3089
Нил™, Все сработало! плюсище Вам в карму!
А так как сработало то темку прикрою. Ибо в статьях лично у меня все сразу работало
В начало страницы
Предыдущая темаСледующая тема Перейти на форум: