ジャンボトロンでイメージをサイズ変更する方法？

誰かが私を助けてくれるほど親切であれば、それはばかげているかもしれませんが、まだブートストラップで物事を学んでいて、一般的にコーディングしています。イムは、ジャンボトロンに私の画像を埋めるために望んでいますが、全体のジャンボトロンを満たしていないその私の画像を見て取る場合、それだけではなく、私もそれは少し小さいジャンボトロンでイメージをサイズ変更する方法？

<body> 
     <div class="container" id="header"> 
     <div class="row"> 
      <div class="col-md-12"> 
        <ul class="nav justify-content-end p-4"> 
        <li class="nav-item"> 
         <a class="nav-link active" href="#">HOME</a> 
        </li> 
        <li class="nav-item"> 
         <a class="nav-link" href="#">ABOUT</a> 
        </li> 
        <li class="nav-item"> 
         <a class="nav-link" href="#">THE ASAP ADVANTAGE</a> 
        </li> 
        <li class="nav-item"> 
         <a class="nav-link" href="#">HOW IT WORKS</a> 
        </li> 
        <li class="nav-item"> 
         <a class="nav-link" href="#">FAQS</a> 
        </li> 
        </ul> 
      </div> 
     </div> 
     </div> 

     <div class="jumbotron"> 
      <img src="heroimage.jpeg" class="img-fluid" alt="Responsive image" id="heroPic"> 
    </div>

--- CSSコードしたいと思いますbackground-size属性のみbackground-imageとしてCSSによって追加された画像に適用されます---

#header{ 
background-color: #004157; 
height:120px; 
width:100%; 

} 

#heroPic{ 
    opacity: .5; 
    background-size: cover; 
    padding:0; 
    margin:0; 
}

出典

2017-03-16 Bharness913

「width：100％; height：200px;」を '＃heroPic' –

です。参考のためにbackground images hereとbackground sizing hereについて読むことができます。基本的には

あなたはこのような何かを行うことが背景として画像を追加したい場合：

#heroPic{ 
    opacity: .5; 
    background: url('heroimage.jpeg') center center no-repeat; 
    background-size: cover; 
    padding:0; 
    margin:0; 
}

次にHTMLにこの行を削除する必要があります：

<img src="heroimage.jpeg" class="img-fluid" alt="Responsive image" id="heroPic">

願って助けてください。

出典

2017-03-16 01:29:40 crazymatt

私はhtmlの行を削除してからイメージを追加してもよろしいですか？ – Bharness913

@ Bharness913あなたはCSSを通して画像を追加しています。私が追加したコードを見ると、あなたの画像を背景画像として追加するurl（ ''）を参照しているのがわかります。自分の答えで追加したリンクを読んでください – crazymatt

ジャンボトロンでイメージをサイズ変更する方法？

答えて

関連する問題