如何根據引導屏幕分辨率

Question

when I change screen resolution the image size changes from full sreen but the navbar remains in full screen

Answer 1

您可以將圖像簡單地設置寬度調整內容大小：100％，它會與瀏覽器擴展。

在引導

或者

的圖像會以 .IMG流體作出響應。最大寬度：100％;和高度：自動;應用於 圖像，以便它與父元素一起縮放。 [https://v4-alpha.getbootstrap.com/content/images/][1]

因此，簡單地給img一類img-fluid。

Answer 2

最好的辦法是使用div並添加圖像作爲div的背景，可以說你想調用div類作爲hero-banner。 CSS類將是：

// css 
.hero-banner{ 
background-image: url('/images/location/hero.jpg'); 
background-size: cover; 
background-repeat: none; 
min-height:450px; 
} 



// html 
<nav> 
    .... 
</nav> 
<div class="hero-banner"></div>