I am working on a new project, a recipes management web app, written in React.

I have a div at the top with a width and height of 100vw and 100vh, respectively.

I found a great stock photo that is free for commercial use, and have it inside the app, filling the div.

The issue I have comes with when I set the CSS property ‘object-fit’ to “contain”, for the purpose of keeping the ratio. It leaves white space on two sides, the sides depending on the longer edge, as one would expect.

I just am not as impressed with the way it looks as I thought it would be.

Are there any common designs that are used in the industry on creating a “banner” of sorts that fills the screen and maintains its ratio? Is it acceptable to have that white space on the sides? is there another technology or method to accomplish this task?

Since it is related to food, I had a canvas in the back of my head, but it is new to me.

This is what it looks like when maximised on my screen:

r/webdev - Finding and using banner images for React

Here it is again at a smaller sized window:

r/webdev - Finding and using banner images for React

Source link

Write A Comment