Как сделать отзывчивое фоновое изображение?

Question

Я разрабатываю тему Wordpress, и у меня проблема. На моей домашней странице хочу получить большое фоновое изображение с некоторым текстом, сосредоточенным на нем. До сих пор довольно стандартный. Дело в том, что я хочу, чтобы высота осталась прежней, а браузер стал меньше, изображение должно обрезаться с обеих сторон соответственно, чтобы изображение сохранялось в центре. Вот отличный пример, который я нашел, попробуйте изменить его размер и посмотреть на большое изображение в верхней части: http://www.shopstyle.com/

Как я могу получить этот эффект?

Заранее благодарен! :)

Answer 1

Вы можете использовать свойство background-size со значением cover, которое было сделано для этой цели

крышка
Ключевое слово, которое является инверсией содержать. Масштабирует изображение как можно больше и поддерживает соотношение сторон изображения (изображение не сжимается). Изображение «покрывает» всю ширину или высоту контейнера. Когда изображение и контейнер имеют разные размеры, изображение обрезается либо влево/вправо, либо сверху/снизу.

установить высоту вам нужно (вы можете установить разную высоту для FHD, HD, планшетных ПК, мобильного с запросами средств массовой информации), и изображение будет обрезано с боков и увеличенный в случае необходимости (если он короче, чем высота вы установили)

Answer 2

Дополнительно к использованию фона: обложка;

Вы должны использовать высоту порта просмотра для управления высотой изображения. Таким образом, это всегда будет определенный процент высоты порта просмотра, независимо от того, является ли это настольным компьютером, ноутбуком, телефоном и т. Д. Это более жидкий способ отображения высоты.

Пример (охватывает весь экран):

.yourelement { 
    height: 100vh; 
} 

Пример (охватывает половину экрана):

.yourelement { 
    height: 50vh; 
} 

Adjust соответственно.