How to properly resize a site?

Question

css

Hello. Recently I decided to learn how to make up websites in order to earn extra money on freelance, and it’s interesting for myself. I study everything myself, look for information on various sites, forums, watch video tutorials, etc.
I decided to make a dozen layouts to get my hands on it, I found various free layouts on the Internet.
I work for laptops with a screen resolution of 1366 x 768.
The site on the layout is 1440px wide. In the cap on the background of the image. I insert an image from the layout into the header on the background, open it in the browser - the image is cropped, but occupies the full page, without scrolling. If you look at the resolution of a mobile phone, then the menu moves out



I think, okay, I probably need to add the Header width. I set the width according to the layout, update it, and I get a horizontal scrollbar, but the image is not cropped now But if the resolution of the mobile screen, then everything is fine, it enters smoothly and nothing moves out And if you move it away, it presses to the left edge Please help with this problem and suggest how to correctly set the size of the page so that nothing moves out when moving away, approaching. PS I heard about media queries out of the corner, but in my opinion there is somehow another way to solve this problem

Answer 1

In order for the image to always be 100% of the screen width, its height must be "floating".
Option #1 , where the background is an img element.
In this case, the height of the header will always adjust to the height of the image. But for the image to be the background, all other child blocks in the header will need to be in a block with position: absolute;
Option number 2 , in which the background is set through the background of the header.
To do this, we need to know the height of the header, which will be different for different screen widths. In this case, the relative units vw and rem save.
I'm not sure if my method is the most correct and optimal, but it works.

Answer 2

Try Bootstrap 4) It will do many things for you.