根據屏幕分辨率橫幅

Question

我正在尋找在我的Django網站中添加橫幅，但我遇到問題。如果我的屏幕分辨率降低，橫幅將無法適應屏幕分辨率。

它是在1920x1080的屏幕上工作，但在我的1680X1050，橫幅沒有很好的調整。

這是我在HTML腳本：

<div class="container" id="banner"> 
    <div class="row"> 
     <img src="{% get_static_prefix %}images/Header.tif"> 
    </div> 
</div> 

而且我的CSS部分：

#banner { 
    width:100vw; 
    } 

屏幕1920×1080：

屏幕1680×1050：

​​ 圖片使得1920x325像素。如何根據我的屏幕分辨率調整橫幅以獲得動態橫幅？

謝謝

Answer 1

CSS相對%單位工作的父元素和vh去與viewport。在這裏閱讀更多：Styling HTML and BODY selector to height: 100%; vs using 100vh，這可能也是幫助：https://bitsofco.de/viewport-vs-percentage-units/

<div class="container" id="banner"> 
    <div class="row"> 
     <img style='width:100%' src="{% get_static_prefix %}images/Header.tif"> 
    </div> 
</div>