CSS Позиционирование изображения для изменения размера окна

Question

Я новичок в HTML и CSS, но хочу, чтобы изображение охватывало весь заголовок без вырезания части изображения или фиксированного размера. В настоящее время все изображение не отображается, и когда окно изменено, часть изображения обрезается. Я хочу, чтобы окно было настраиваемым, и когда оно есть, изображение настраивается вместе с ним для отображения всего изображения.

Вот CSS для моего заголовка. Кроме того, мой макет страницы состоит в том, что заголовок содержится только в «странице» div-сайта, а остальная часть содержимого вложена в «страницу» как «контент».

#header { 
    background-image: url("../images/header.jpg"); 
    background-position: right; 
    background-size: 100%; 
    width: 100%; 
    height: 20%; 
    left: 50%; 
    position: fixed; 
    top: 0%; 
    transform: translateX(-50%); 
} 

Answer 1

Сделайте свой образ HTML-элемент <img> - вместо фона - это будет легче получить эффект вы хотите с меньшим количеством кода.

body { 
 
    margin: 0; 
 
    } 
 
#header { 
 
    width: 100%; 
 
    height: auto; 
 
    position: fixed; 
 
} 
 
img { 
 
    width: 100%; 
 
}

<div id="header"> 
 
    <img src="http://placehold.it/1000x150"> 
 
</div>

Answer 2

Вот метод, использующий background-image с дополнением к 'фальшивой' высоты Div.

body { 
 
    margin: 0; 
 
} 
 
#header { 
 
    width: 100%; 
 
    height: 150px; 
 
    position: fixed; 
 
    background-image: url("http://placehold.it/1000x150"); 
 
    background-size: contain; 
 
    background-repeat: no-repeat; 
 
    height: 0; 
 
    padding-top: 15%; /* (img-height/img-width * width) */ /* (150/1000 * 100) */ 
 
}

<div id="header"> 
 
</div>

EDIT: Если кадрирование нормально, вы можете попробовать this.