Deutsch

WP: как адаптировать размер изображения шапки сайта?

349  
eva junn2007 знакомое лицо31.03.18 23:28
eva junn2007
31.03.18 23:28 

Здравствуйте, я недавно создала свой сайт на WordPress. В общем и целом он хорошо адаптирован к мобильным устройствам. Проблема только в шапке (изображении заголовка). Она единственная оказалась не адаптированной. Другими словами, на мобильных устройствах она не меняет размер. В итоге видно только часть названия: три-четыре буквы.

Подскажите, пожалуйста, как мне адаптировать шапку? Может, нужен какой-то плагин, только не для адаптации всего сайта, а именного этого элемента?

Очень надеюсь на вашу помощь.

Заранее спасибо.

#1 
regrem патриот31.03.18 23:48
NEW 31.03.18 23:48 
в ответ eva junn2007 31.03.18 23:28, Последний раз изменено 01.04.18 00:40 (regrem)
Я недавно создала свой сайт на WordPress. В общем и целом он хорошо адаптирован к мобильным устройствам. Проблема только в шапке (изображении заголовка). Она единственная оказалась не адаптированной. Другими словами, на мобильных устройствах она не меняет размер. В итоге видно только часть названия: три-четыре буквы.

Было у меня такое.

Я находил варианты без плагинов.

Самый последний вариант стал:

Я вырезал Logo в шапке (header) и сделал там страницу на HTML, присвоив стили.

То есть у меня сейчас своя адаптированная шапка.


Но Вам это делать не надо, это я так к слову.

Какой у вас шаблон? Легко можно это исправить, добавить свои стили в таблицу стилей

#2 
eva junn2007 знакомое лицо01.04.18 00:09
eva junn2007
NEW 01.04.18 00:09 
в ответ regrem 31.03.18 23:48

Спасибо вам за ответ!

У меня Frontier.

#3 
regrem патриот01.04.18 00:41
NEW 01.04.18 00:41 
в ответ eva junn2007 01.04.18 00:09, Последний раз изменено 01.04.18 07:45 (regrem)


#header-logo img {

max-width: 80%;

float: left;

}


Поместите это в пользовательский CSS, потом можно в файл style.css в самый конец кодов.

И меняйте проценты. Изменяется размер изображанения?

Если да, то надо писать медиазапросы, хотя бы парочку. Ну а если нет, надо искать где нарушено.

#4 
Sergo2008 коренной житель01.04.18 13:29
Sergo2008
NEW 01.04.18 13:29 
в ответ eva junn2007 31.03.18 23:28

Советую использовать не одно изображение логотипа, меняя в медиа размер, как советует 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 формат, и в медиа задавайте размер.

#5 
eva junn2007 знакомое лицо01.04.18 19:11
eva junn2007
NEW 01.04.18 19:11 
в ответ eva junn2007 31.03.18 23:28

Всем ответившим большое спасибо!

#6