横幅取决于屏幕分辨率

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;
    }

屏幕1920x1080：

屏幕1680x1050：

图片为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>