I am trying to make the line art computer screen background match its parent divs size so it scales correctly among all of the breakpoints larger and smaller. The page is layed out in a no scroll full screen format, the height and width of both sections being controlled by vw and vh.
When trying to use the background image to acheive this i ran into an issue with cover and contain, cover working the best. The issue with cover is that when scaling down to smaller breakpoints the images width gets cut off, with contain the image doesn’t scale vertically and looks much worse than cover. This left me to attempt using an Image element which didn’t work either as the Image elements parent Div scales up when you place the Image block into it. I tried resizing the Image element element to the parent Divs size to rectify the issue and only made it the positive scaling worse. I am very stuck and don’t know how to move forward so any help would be greatly appreciated.
Best regards, Yondio
Here is my site Read-Only: Webflow - Copy of Craig's Dynamite Site
After testing further it seems the image block is set to expand its height equal to its width. This is why it is resizing the parent Div(parent Divs width is larger than height so resizing the image width to match its parent causes the height to expand past where i want it.) If anyone knows how to break this width-height sizing link for the image element that would be great.
Tried breaking the width height linkage by adding custom dimensions to the image elements settings. it seems that the height setting worked but the width setting did nothing to affect the image. If you look at the settings i have it set to 1411 or something like that, obviously the width is nowhere near that, for reference the body is 1411 or whatever it is in the screenshot.
Solved the image element sizing by going into the css style size tab and adding the width that way. Now the input image is set to cover but the input images dimensions are larger than the image elements dimensions leading to the input image being cut off on the top and bottom. This should be a simple fix in photoshop. Will update after the sizing change is made and then i will test the elements responsiveness.
after resizing the picture everything fits and is responsive. Thank you me! lol
