Исходное изображение CSS, изменение размера на основе видового окна

Question

Я делаю один пейджер из существующей темы бутстрапа, у которого есть фоновое изображение в разделе с селектором background-size: cover, примененным к заголовку.

В настоящее время изображение охватывает только 80-90% экрана по вертикали в большинстве браузеров, шт. Я пробовал его. Нижняя часть заполнена белым фоном, как показано ниже в следующем разделе. Я хотел бы, чтобы изображение занимало весь вертикальный вид при первой загрузке страницы.

Я могу вручную отредактировать высоту на пиксель, чтобы заставить его работать для данного монитора/браузера, но есть ли способ его динамического изменения в зависимости от высоты представления для каждого браузера, машины и т. Д.? Или я застрял в этой проблеме «белого пространства».

Пример хромом на этом компьютере: https://i.stack.imgur.com/yqMHp.jpg

Answer 1

Дайте ему height:100vh;

html,body{ 
 
    width:100%; 
 
    height:100%; 
 
    margin:0; 
 
    padding:0: 
 
} 
 
.imageH{ 
 
    width:100%; 
 
    margin:0; 
 
    padding:0; 
 
    background-image:url("http://images.financialexpress.com/2015/12/Lead-image.jpg"); 
 
    background-size:cover; 
 
    background-position:center; 
 
    height:100vh; 
 
}

<div class="imageH"></div>

И если у вас есть Navbar до этого Div сказать высоты 50px затем использовать calc(100vh - 50px)

html,body{ 
 
    width:100%; 
 
    height:100%; 
 
    margin:0; 
 
    padding:0: 
 
} 
 
.navbar{ 
 
    width:100%; 
 
    margin:0; 
 
    padding:0; 
 
    background-color:green; 
 
    height:50px; 
 
} 
 
.imageH{ 
 
    width:100%; 
 
    margin:0; 
 
    padding:0; 
 
    background-image:url("http://images.financialexpress.com/2015/12/Lead-image.jpg"); 
 
    background-size:cover; 
 
    background-position:center; 
 
    height:calc(100vh - 50px); 
 
}

<div class="navbar">navbar comes here</div> 
 
<div class="imageH"></div>

Answer 2

привет просто дать этот код

body{background: url(images/bg.jpg) no-repeat center center fixed; 
     -webkit-background-size: cover; 
     -moz-background-size: cover; 
      -o-background-size: cover; 
      background-size: cover;} 

вы можете увидеть это в качестве примера https://blackrockdigital.github.io/startbootstrap-the-big-picture/

благодаря

Answer 3

это происходит эта проблема из-за фонового size.you необходимо отрегулировать размер фонового изображения. background-size:cover; или используйте это background-size:100% 100%; это заполнит все пробелы, которые находятся в вашем фоновом изображении на botoom.