Блог

Я загрузил пользовательское изображение на свой сайт WordPress, чтобы использовать его в качестве фона заголовка. У меня он отображается с помощью следующего CSS:

 .main-header-bar {background-image: url("image url"); background-repeat: no-repeat; background-size: 100%;}  

Это позволяет изображению растягиваться по ширине экрана даже при изменении размера экрана.

Задача, в которой мне нужна помощь, — это настроить высоту вместе с шириной.

Я думаю, что проблема в том, что высота области заголовка определяется размером шрифта, выбранным для заголовка сайта, слогана и меню. Чтобы проиллюстрировать это, когда я перемещаю окно браузера со среднего экрана на большой, размер моего изображения увеличивается, чтобы соответствовать размеру нового монитора, но шрифт заголовка, слогана и меню остается прежним. Поскольку высота теперь недостаточна для размещения изображения, теперь, когда оно шире и выше, оно отсекает нижнюю часть изображения.

Есть ли элегантный способ решить эту проблему?

Для справки, я использую тему Astra.

Спасибо!

ОБНОВЛЕНИЕ: Я провел еще несколько экспериментов. Я обнаружил, что изображение на самом деле не «отрезано» само по себе. Все дело в этом. Однако на большом экране при обычном 100% — ном увеличении содержимое страницы отображается, перекрывая изображение. Если я увеличу масштаб, изображение останется на 100% ширины страницы, в то время как заголовок, слоган, меню и содержимое увеличатся. Расширение заголовка перемещает содержимое вниз, и все изображение становится видимым.

Чего бы мне хотелось, так это чтобы заголовок и заголовок были синхронизированы друг с другом. Прямо сейчас размер изображения устанавливается относительно размера экрана (100%), в то время как размер текста задается шрифтом. Есть ли способ связать это с вещами вместе, чтобы обеспечить согласованный внешний вид?

ОБНОВЛЕНИЕ: Я думаю, что в основном я это понял. Я уверен, что делаю что-то небрежно, потому что я не совсем все понимаю. Вычисляя размер шрифта и используя «vw», он позволяет регулировать размер шрифта в зависимости от ширины экрана, а не от пикселей. Поскольку мое изображение заголовка также делает это, оно выравнивается (не идеально, но работает между экранами, на которых я тестирую, достаточно хорошо). Вот код, который я добавил:

 html { font-size: calc(0.75em   0.5vw) }  .site-title { font-size: calc(7.1vw)}  .site-description {font-size: calc(1.6vw) !important;}  .menu-item { font-size: calc(1.8vw);}  

Как насчет того, чтобы попробовать это с помощью мультимедийного запроса, чтобы удовлетворить больший видовой экран.

 .main-header-bar {  background-image: url("image url");  background-repeat: no-repeat;  background-size: 100%;  }    @media only screen and (min-width: 600px) {  .main-header-bar {  background-image: url("image url");  background-repeat: no-repeat;  background-size: cover;  }  }