Добрый вечер.
Возник вопрос с адаптивностью картинок.
Задал для картинок в стиле класс max-width: 100%;, Картинка по ширине уменьшается под размер экрана, а вот по высоте не хочет, сжимается и вытягивается, и непропорциональная.
Как сделать что бы уменьшалась с сохранением пропорций? Пробовал и height: auto; и height: 100%; не помогает, может ли быть что то из за так сказать вышестоящего дива? Шаблон дефолт от Токарева
Адаптивная картинка
ЕСТЬ РЕШЕНИЕ
ЗАКРЫТО
#2
10 апреля 2016 в 20:14
Присоединяюсь. Такая же проблема с статьях. В картинках, вставляемых через bb все адаптивно посредством
.bb_img img {
max-width: 100%;
}
Для статей прописано
.cboxElement img {position:relative;max-width: 100%;} А для высоты ничего не работает, уже много вариантов перепробовано
.bb_img img {
max-width: 100%;
}
Для статей прописано
.cboxElement img {position:relative;max-width: 100%;} А для высоты ничего не работает, уже много вариантов перепробовано
#3
10 апреля 2016 в 20:25
img {
width: auto\9;
height: auto;
max-width: 100%;
}
width: auto\9;
height: auto;
max-width: 100%;
}
Сегодня в 07:59
я прописал
отлично все помогло
только внимательно нужно, ибо на иконках повылезать может много где
если вылезет, добавьте в стилях
ну, а там, где иконки, например для форума
только внимательно нужно, ибо на иконках повылезать может много где
если вылезет, добавьте в стилях
#5
10 апреля 2016 в 20:32
Не работает ни один из предложенных вариантов
#6
10 апреля 2016 в 20:32
У меня не много не стандартная ситуация, у меня к блогам прикручен визуальный редактор, он вставляет картинку просто тегом img,
я прописал так:
.blog-body img {
max-width: 100%;
}
То бишь все картинки что в blog-body занимают всю возможную ширину, а вот по высоте не масштабируется.
Если в консоле снять галочку о высоте то все работает
я прописал так:
.blog-body img {
max-width: 100%;
}
То бишь все картинки что в blog-body занимают всю возможную ширину, а вот по высоте не масштабируется.
Если в консоле снять галочку о высоте то все работает
#7
10 апреля 2016 в 20:34
.blog-body img {
max-width: 100%;
}
А если прописать вот так:
#8
10 апреля 2016 в 20:38
Не работает ни один из предложенных вариантов
все прекрасно работает, у меня так же шаблоны Александра, и на них и на дефолтном все картинки адаптивные
#9
10 апреля 2016 в 20:42
Не работает ни один из предложенных вариантов
все прекрасно работает, у меня так же шаблоны Александра, и на них и на дефолтном все картинки адаптивные
у вас 1.10.6?
#10
10 апреля 2016 в 20:43
Та в статьях у меня и так все работает и в блогах при использовании бб кодов тоже все работает, а вот при использовании визуального редактора наблюдаются такие проблемы
#11
10 апреля 2016 в 20:48
al955, да
#12
10 апреля 2016 в 20:58
ОК. Надо будет на досуге найти время, поковыряться как следует над этим вопросом
width:100%;
height:auto;
работает однозначно.
Там в коде, видно element-style{ширина, высота.
То есть, ширина задана в самом теге картинки <img src="/..." width="1280" или тут же style="width:1280"
Эта запись имеет приоритет над тем, что указано в styles.css для класса к этой картинке.
Можно пробовать использовать
width:100% !important;
height:auto!important;
Ещё замечаю, что заданные стили могут не срабатывать, и картинка деформируется неправильно, когда имеется таблица. Например два столбца, картинка в левом, а в правом столбце ширина указана в процентах и он сжимает левый столбец и картинку тоже.В правом столбце лучше не указывать ширину вообще. Нужно правильно высчитывать ширину и чётко её указывать или правый столбец не указывать ширину совсем. Это не к данному случаю, так, на заметку.
height:auto;
работает однозначно.
Там в коде, видно element-style{ширина, высота.
То есть, ширина задана в самом теге картинки <img src="/..." width="1280" или тут же style="width:1280"
Эта запись имеет приоритет над тем, что указано в styles.css для класса к этой картинке.
Можно пробовать использовать
width:100% !important;
height:auto!important;
Ещё замечаю, что заданные стили могут не срабатывать, и картинка деформируется неправильно, когда имеется таблица. Например два столбца, картинка в левом, а в правом столбце ширина указана в процентах и он сжимает левый столбец и картинку тоже.
#14
10 апреля 2016 в 21:46
Нил™, Все сработало! плюсище Вам в карму!
А так как сработало то темку прикрою. Ибо в статьях лично у меня все сразу работало
А так как сработало то темку прикрою. Ибо в статьях лично у меня все сразу работало