イメージがジャンボトロンにとって大きすぎます

これは私の最初の投稿です。私は自分のCSSを修正しようとしています。 .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>

Iは最小幅持ってみました：CSSセレクタを、それは同じことが影響していました。私私の視聴者が.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

あなたのCSSと画像を追加する場合は、ブートストラップの機能のすべてを使用することはできませんへのあなたのイメージをcomes.Addブートストラップ機能を使用class.Just 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

イメージがジャンボトロンにとって大きすぎます

答えて

関連する問題