Bannière en fonction de la résolution de l'écran

Question

Je cherche à ajouter une bannière sur mon site Django mais j'ai un problème. Si ma résolution d'écran diminue, la bannière ne s'adaptera pas à la résolution de l'écran.

Il fonctionne sur l'écran 1920x1080, mais dans mon 1680X1050, la bannière n'est pas bien ajustée.

Ceci est mon script html:

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

Et moi css:

#banner { 
    width:100vw; 
    } 

écran 1920x1080:

écran 1680x1050:

La photo fait 1920x325 pixels. Comment puis-je ajuster la bannière en fonction de la résolution de mon écran afin d'obtenir une bannière dynamique?

Merci

Answer 1

CSS% unités de travail avec par rapport à l'élément parent et vh va avec viewport. lire la suite ici: Styling HTML and BODY selector to height: 100%; vs using 100vh et cela peut aider aussi: 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>