Setting design in any browser screen size without scroll

Question

I need to design a website with html, bootstrap etc. Main critiriea is that in any browser window size the scroll bar donot have to appear. image and other has to adjust for that. Screen is like:.

Please help me.

Answer 1

This is a tough one. You have to use media queries for height, account for popular heights and make the elements for the intermediate height states not overflowing your screen. I suggested you use the following media queries and adjust your elements for each of them accordingly:

@media (min-height: 1200px) {
    .banner{ height: 760px; } //example
}

@media (min-height: 1080px) {
    .banner{ height: 600px; } //example
}

@media (min-height: 900px) {
    .banner{ height: 560px; } //example
}

@media (min-height: 800px) {
    .banner{ height: 440px; } //example
}

@media (min-height: 768px) {
    .banner{ height: 400px; } //example
}

@media (min-height: 600px) {
    .banner{ height: 300px; } //example
}