What we need to understand about the full-screen images
This is always a tricky question to answer, because you have to first understand how image resizing works to understand the nature of full-screen images.
For this example, we’ll pretend the image below is our computer monitor
And this is the image we want to use full screen
Problem is, the image of the woman is not the same size as our computer monitor. So what are our options?
Technically we could just resize the image to the same size as our monitor. But because the original image and our monitor are two different size ratios, we’d have to severely distort the image to accomplish this, and it would end up looking like this:
Obviously the above result is a bad solution. How can we avoid image distortion?
One way is to use the “cropping” method. Here’s an example:
The above example covers the entire screen, but as you can see, it also crops, or cuts off a large portion of the image. So how can we display the entire image without distorting it and without cropping it either? By resizing the image so it fills as much of the screen as possible, while making sure no portion of it is cropped. Here’s the result:
As you can see, the above example creates white space on the sides of the image. So how can you display a full-screen image without distorting it, without cropping it, and without creating white space? Technically, you could just make the image the same exact size as your computer monitor, but because there are so many different monitor sizes, that isn’t the greatest solution. Instead, you’ll have to decide which one of the above examples is best for your project:
- Distort the image: almost always a bad choice
- Crop the image: a good choice when you want to avoid “white space”
- Fit without cropping: usually creates “white space”, but a good choice when showing the entire image is most important