根据屏幕分辨率横幅

问题描述：

我正在寻找在我的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像素。如何根据我的屏幕分辨率调整横幅以获得动态横幅？

谢谢

试''哦 – tech2017

完美！为什么它有效，不是我的解决方案？添加您的消息作为答案;） – Deadpool

答

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>

根据屏幕分辨率横幅

相关推荐