CODEWITHSUNDEEP
htmlcssscreen-resolution
Essex
Essex

Reputation: 6138

Banner depending of screen resolution

I'm looking to add a banner in my Django website but I'm having an issue. If my screen resolution is decreasing, the banner will not adapt to the screen resolution.

It is working on 1920x1080 screen, but in my 1680X1050, the banner is not well-adjusted.

This is my script in html :

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

And my css part :

#banner {
    width:100vw;
    }

Screen 1920x1080 :

enter image description here

Screen 1680x1050 :

enter image description here The picture makes 1920x325 pixels. How I can adjust the banner depending of my screen resolution in order to get a dynamic banner?

Thank you

Upvotes: 0

Views: 273

Answers (1)

tech2017
tech2017

Reputation: 1806

CSS % units work with relative to parent element and vh goes with viewport. read more here: 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>

Upvotes: 1

Related Questions