[X] Помощник

[sosnovskij Topic Starter]

Привет! Имеется адаптивный шаблон на Wordpress (но в принципе не суть). Все изображения, которые публикуются в контенте постов адаптируются под размеры экранов.

Сейчас вставил широкое изображение в шапку просто в файл header.php. На десктопе все хорошо, а на мобильных устройствах оно показывается не полностью, но горизонтальной прокрутки нет.

Как решить проблему, чтобы на мобильных устройствах картинка показывалась корректно? С помощью тега picture?

[ShowPrint]

Sosnovskij, сайт в сети или на локалке?
Если в сети, то пришли ссыль в ЛС - гляну может быть стилями можно поправить...

[sosnovskij Topic Starter]

ShowPrint, в сети пока нет :) А стилями в style.css? Это изображение-баннер. То есть в будущем могут быть разные.

[ShowPrint]

Sosnovskij, да - в style.css

Я пока не столь великий спец чтоб ванговать и давать рекомендации вслепую, а с cms и шаблонами совсем не знаком  :wacko:

По идее это должно "лечиться"  стилями, применяемыми к изображениям. Первое на что посмотрел бы и с чем "поигрался" - со свойствами: width, max-width, min-width
Естественно в той части css которая отвечает условиям @media screen and (max-width:???px)

[sosnovskij Topic Starter]

ShowPrint, там для изображений в посте на автомате создаются отдельные мини-изображения для мобильных экранов.

[ShowPrint]

на автомате создаются отдельные мини-изображения для мобильных экранов

То что они создаются - хорошо, но как они выглядят на тех самых мобильных экранах зависит от стилей с которыми они выводятся (если "созданное" отличается от "показанного")  :)

[TimurR]

image {
width: 100%;
height: auto;
}

Ширина изображения будет браться относительно ширины контейнера, в котором оно находится. 

Сообщение отредактировал TimurR - 20.9.2017, 0:46

[sosnovskij Topic Starter]

TimurR, поставил

width="100%" height="auto"

Сработало.

Всем спасибо :)

Замечание модератора: Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней. Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой или обратитесь к любому из модераторов.