Putting the image directly into a fork of Paul’s pen, it works as well as can be expected.
On a portrait, phone-like aspect ratio, it works well. But on a landscape (computer) screen a lot is cropped from the bottom of the picture to account for the different aspect ratio between photo and screen.
But the face stays in vision, which I guess is the main focal point of the picture. Though it does get blown up a lot.
For the image to work (to best effect) on both portrait and landscape screens, it would be better to have a more square aspect ratio and composition to suit the situation.
2 Likes
It is working but due to the laws of physics it has to be zoomed out to fit the area. How can you expect that person’s height fit in a viewport and their width fit in the viewport without something having to change?
You have 3 choices only.
You use the value cover and get this.
Or you use the value ‘contain’ and get the whole image but will get gaps at the side.
Or you squish your person and get this.
There are no other choices apart from swapping images via the picture tag for different sized screens but the above still holds true for them also.
You need to choose images carefully and as Sam said you make sure the focal point is where you want it to be. The image you chose just shows the person so you would have been better getting a much larger image but keeping the person the same size and then revealing more background around the person. In that way when you scale smaller the focal point is still in view.
As an example look at this old demo and see the full page image.
Then resize the page smaller and you still get a usable image.
2 Likes
I realise you may not be able to re-shoot or get a more suitable photo, but as an example of how putting more thought into photo composition can help with this problem, I have created this pen with another photo.
Of course this isn’t your photo, it’s just a “free to use” one I found online and cropped for this purpose.
Vertically I cropped it similarly to yours, from the top of the forehead, to the bottom of the chest.
But horizontally is doesn’t crop off at the shoulders to create a very tall portrait image like yours, I cropped beyond the shoulders until it was as wide as it is tall, for a square aspect ratio, keeping the face in the centre. This is the happy medium between portrait and landscape.
Of course you will still get parts cropped further if the screen aspect is anything other than square. But with an optimised composition and aspect to begin with, this is kept to a minimum. It is pretty much as good as it will get while catering for both portrait and landscape screens.
3 Likes
Yes, thanks, it became a little clearer to me, it’s all about choosing a photo.
2 Likes
Yes, when you look at yuor photo, it is cropped close to the subject with very little background.
But when you accept that some cropping of the image is inevitible, you may choose an image that has expendable areas around the subject that may be cropped without disturbing the subject.
1 Like
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.