Проблема с масштабированием ширины фонового изображения (CSS)

Question

У меня проблемы с изображением, которое с помощью «содержать» в CSS добавляет огромное расстояние между верхним изображением и следующим абзацем. Когда я использую «обложку», проблема с интервалом отсутствует, но ширина изображения слишком высока.

Я использую это в CSS

.headerLine{ 
position: relative; 
width: 100%; 
overflow: hidden; 
height: auto; 
background-repeat: no-repeat; 
background-position: center top; 
background-image: url(../images/bgTop.jpg); 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: contain; 

I upoaded картинки для 100% рабочего стола, используя крышку, используя содержать и один для пожелавших результатов здесь: Description

Answer 1

Рассматривали ли вы в том числе изображения как <img> вместо фонового изображения? Это приведет к тому, что div заголовкаLineLine динамически изменит высоту в соответствии с дочерним изображением.

HTML:

<div class="headerLine"> 
    <img src="sampleimg.jpg" alt="Sample Image" width="600" height="200"> 
</div> 

CSS:

.headerLine img { 
    display: block; 
    width: 100%; 
    height: auto; 
} 

Что касается фона размера от W3 Schools:

фона Обложки:

Масштаба фонового изображения, чтобы быть в большом насколько возможно, чтобы фоновая область полностью покрыта фоновым изображением. Некоторые часть фонового изображения может не быть в поле зрения в фоновом режиме позиционирования области фона крышки будет масштабировать изображение

фона Содержать:

масштабировать изображение самого большого размера таким образом, что оба его ширина и его высота высота может быть в пределах области содержимого