横幅取决于屏幕分辨率

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 and this may help too: 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>

横幅取决于屏幕分辨率

Banner depending of screen resolution

html

css

screen-resolution