我想在我的 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 像素。如何根据我的屏幕分辨率调整横幅以获得动态横幅?
谢谢
最佳答案
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>
关于html - 横幅取决于屏幕分辨率,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45420113/