Bild ist zu groß für Jumbotron

Es ist mein erster Beitrag und ich versuche, meine CSS zu beheben. Ich habe ein .jumbotron (Bootstrap) und mein Bild ist zu groß. Das Ändern der Größe wird nicht funktionieren, da die Leute unterschiedlich große Bildschirme haben. Hier ist der Code.Bild ist zu groß für 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>

Ich versuchte, das die min-Breite aufweisen: CSS-Selektor, aber das hatte das gleiche beeinflussen. I nicht wollen meine Zuschauer scrollen, um den Rest des .jumbotron zu sehen. Kann mir jemand den Fehler zeigen?

Quelle

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>

Quelle

2016-04-30 01:15:42 mlegg

Sie werden nicht in der Lage sein, alle Funktionen in Bootstrap zu verwenden, wenn Sie Bild mit Ihrem CSS hinzugefügt werden class.Just die Bootstrap-Funktionen verwenden, die in Ihrem Bild comes.Add zu img-responsive Klasse.

.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>

Quelle

2016-04-30 01:42:23 AVI

Bild ist zu groß für Jumbotron

Antwort

Verwandte Themen