Изображение слишком велико для jumbotron

Это мой первый пост, и я пытаюсь исправить свой CSS. У меня есть .jumbotron (Bootstrap), и мое изображение слишком велико. Повторная калибровка не будет работать, поскольку у людей есть экраны разного размера. Вот код.Изображение слишком велико для jumbotron

.jumbotron { 
 
\t background-image: url('SONUBANNER.png'); 
 
\t height: 500px; 
 
\t width: auto; 
 
\t margin-top: 5rem; 
 
}

<!DOCTYPE html> 
 
<html>  
 
     <head> 
 
     </head> 
 
     <body> 
 
       <section class="jumbotron"> 
 
         <div class="container"> 
 
         </div> 
 
       </section> 
 
     </body> 
 
</html>

Я попробовал, имеющие минимальную ширину: селектор CSS, но это было то же самое влияют. I не хочу, чтобы мои зрители прокрутили, чтобы увидеть остальную часть .jumbotron. Может ли кто-нибудь показать мне исправить?

источник

2016-04-30 Sonu

/* Latest compiled and minified CSS included as External Resource*/ 
 
dna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css'); 
 

 
.jumbotron { 
 
    height: 500px; 
 
    display: flex; 
 
    align-items: center; 
 
    background: url("SONUBANNER.png") center center; 
 
    background-size: cover; 
 
    margin-top: 5rem; 
 
}

<div class="jumbotron"> 
 
    
 
</div>

источник

2016-04-30 01:15:42 mlegg

Вы не сможете использовать все функции в Bootstrap, если вы добавляете изображение с помощью CSS class.Just использовать функции начальной загрузки, которые comes.Add изображение, чтобы img-responsive класс.

.jumbotron { 
 
\t height: 500px; 
 
\t width: auto; 
 
\t margin-top: 5rem; 
 
}

<html>  
 
     <head> 
 
    <title>Bootstrap Example</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
</head> 
 
     <body> 
 
       <section class="jumbotron"> 
 
         <div class="container"> 
 
    <img src="http://weknowyourdreamz.com/images/evening/evening-09.jpg" class="img-responsive" alt="Cinque Terre"> 
 

 
<!-- <img src="SONUBANNER.png" class="img-responsive" alt="Cinque Terre"> --> 
 

 

 
        
 
          
 
         </div> 
 
       </section> 
 
     </body> 
 
</html>

источник

2016-04-30 01:42:23 AVI

Изображение слишком велико для jumbotron

ответ

Смежные вопросы