在jumbotron中調整圖像大小如何？

如果有人可以請客氣，以幫助我，它可能看起來愚蠢，但即時通訊仍然學習的東西引導，只是編碼一般。林想填補我的形象在超大屏幕，但如果你看看我的形象的不充盈整個超大屏幕，不僅如此，但我也想使它成爲一個小一點在jumbotron中調整圖像大小如何？

<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代碼是---

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

} 

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

來源

2017-03-16 Bharness913

剛添加該屬性'寬度：100％;高度：200像素;''到＃heroPic' –

的background-size屬性僅適用於通過CSS添加爲background-image圖像。作爲參考，您可以閱讀關於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

在jumbotron中調整圖像大小如何？

回答

相關問題