WP: как адаптировать размер изображения шапки сайта?
Здравствуйте, я недавно создала свой сайт на WordPress. В общем и целом он хорошо адаптирован к мобильным устройствам. Проблема только в шапке (изображении заголовка). Она единственная оказалась не адаптированной. Другими словами, на мобильных устройствах она не меняет размер. В итоге видно только часть названия: три-четыре буквы.
Подскажите, пожалуйста, как мне адаптировать шапку? Может, нужен какой-то плагин, только не для адаптации всего сайта, а именного этого элемента?
Очень надеюсь на вашу помощь.
Заранее спасибо.
Я недавно создала свой сайт на WordPress. В общем и целом он хорошо адаптирован к мобильным устройствам. Проблема только в шапке (изображении заголовка). Она единственная оказалась не адаптированной. Другими словами, на мобильных устройствах она не меняет размер. В итоге видно только часть названия: три-четыре буквы.
Было у меня такое.
Я находил варианты без плагинов.
Самый последний вариант стал:
Я вырезал Logo в шапке (header) и сделал там страницу на HTML, присвоив стили.
То есть у меня сейчас своя адаптированная шапка.
Но Вам это делать не надо, это я так к слову.
Какой у вас шаблон? Легко можно это исправить, добавить свои стили в таблицу стилей
Советую использовать не одно изображение логотипа, меняя в медиа размер, как советует regrem, а использовать параметр srcse.
<img src="logo.jpg"
srcset=" img/logo-mobile.jpg 320w, img/logo-wide-mobile.jpg 480w, img/logo-tablet.jpg 768w, img/logo-desktop.jpg 1024w, img/logo-hires.jpg 1280w"
sizes=" (max-width: 20em) 30vw, (max-width: 30em) 60vw, (max-width: 40em) 90vw"
alt="My logo">
Изменение размера в стилях, замыливает логотип.
Ну или переведите изображение в SVG формат, и в медиа задавайте размер.