Scale with figma designs

Question

Third time round redoing this because im not really fully able to understand my problem this time round im going to be a bit more detailed.

My problem starts here: Problem

as I think it shows, you can see the width of the picture is 1920:720p, This is too large on the viewport and I need to scroll left and right to be able to see the rest of the image on the page.

I have tried pretty much everything I've seen in the comments so far, perhaps I tried incorrectly but nothing seemed to fix it, keep in mind my display is 19:10 and is the display used with the m1 macbook. Im not sure the exact resolution or if it matters but I can't for the life of me seem to make this image fit my page, I've tried using:

.(the picture) { width: 100%  height: 100% }

And:

.(the picture) { width: 100vw; hight: 100vh; }

And:

.(the picture) { width: 100vmin; height: 100vmax width: 100vmax; height: 100vmin }

And pretty much every combination of those things you could think of and it stays the same resolution and does not ever fit the view port.

Another problem i'm facing is that when I make the window smaller it cuts all the elements that don't fit inside the smaller window.

Thats all I got for now, ill probably add more if I need to later.

Edit1: Keep in mind I did not use vhvw % and vminvmax with only the picture, I tried them with the body element and some other things too.

Answer 1

This is called "Responsiveness".

The tag

Start by adding this meta tag to your head tag:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

vw and vh

as mentioned by @cloned,

use widht:100% and height:100% to set the size relative to the parent. and use width:100vw and height:100vh.

vw is view-port, the size relative to the screen. 100vw means 100% of the size of the screen. So if the screen is 1920p in width, the element itself will appear 1920p. If you set it to 10vw, the element itself has a width of 192 pixels.

On a window with 30px width, 10vw is 3px.

Same is for vh but it's for the height. These guys, vh and vw work completely individually and may create problems on windows with an aspect ratio other than 16:9.

For this we might wanna use v-min or v-max

You can read more on this here:

https://www.w3schools.com/cssref/css_units.asp

https://www.google.com/search?q=how+to+make+responsive+website+using+css

https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design

Extra information

I also use position:fixed when assigned tasks to make the website responsive like this:

.class {
 position:fixed;
 left:0px;
 right:0px;
 width:100vw;
 height:100vh
}

this makes the entire element cover the page and have it completely centred. You can try zooming out, scrolling (although the scrollbar doesn't appear unless there's more) or resizing it to a completely different dimension. It will look as if it's covering the entire page perfectly.