CSS : Object Cover doesn't center an image

Question

I'm trying to create a thumbnail grid, that will be used mainly on mobile.

The image size is unknown : it comes from an Input, and size is dependant of the camera on the mobile phone. So I don't know in advance if a photo will be landscape or portrait. And thus the styling for both thumbnails should be identical.

For a landscape image, I want it to be shown the full height and horizontally centered. For a Portrait image I want to show the full width of the image and vertically centered.

LANDSCAPE IMAGE          PORTRAIT IMAGE
                            +++++++
                            +     +
                            +     +
++++++=======++++++         =======
+     =======     +         =======
+     =======     +         =======
+     =======     +         =======
+     =======     +         =======
++++++=======++++++         =======
                            +     +
                            +     +
                            +++++++

== = actual thumbnail = part of the full image that will be shown
+ = full image size

I guess object-fit: cover; would be best fit.

This works for the landscape image (see codepen : The men on the right is not showw, which is expected)

Unfortunately this doesn't work for the portrait image. The width is correctly scaled to the width of the thumb, but the image is not vertically centered. (see codepen : the top of the building is still visible while the man in front disappeared. What I expected is the top of the building no longer visible, and the head if the man completely visible. I could fix this with a translate, but then the same code won't work with the portrait.

See codepen, using Tailwind https://codepen.io/pasdut/pen/MWbzvzX

Update : I don't know in advance if an image wille be portrait or landscape

Tanner Dolby · Accepted Answer · 2022-08-04T15:25:47.810

4

If you give the the portrait image height: 100% it will horizontally and vertically center the image in it's container paired with object-fit: cover. You just need to add the h-full tailwind class to the thumbnail #2 <img> element for it to have height: 100%.

<img class="object-cover min-w-full min-h-full h-full" 
  src="https://dummyimage.com/400x900/472647/ffff00&text=portrait+image">

edited Aug 04 '22 at 15:25

answered Mar 10 '21 at 05:04

Tanner Dolby

4,253
3
10
21

1

HI Tanner, Thanks for your answer. This seems to be working for the landscape image too. I've added real images to working codepen https://codepen.io/pasdut/pen/GRNwXzq?editors=1010 – Pasduti Mar 10 '21 at 10:56
Although this answer is correct this doesn't always work with Chrome. See https://stackoverflow.com/questions/62825499/is-object-fit-breaking-some-image-aspect-ratios-in-chrome. Will be fixed in chrome 89 ? – Pasduti Mar 10 '21 at 23:45
@Pasduti Yeah I've read about the `object-fit` browser bug in Chromium. There's not much we can do about it until the Chrome team fixes the bug. – Tanner Dolby Mar 11 '21 at 02:14

score 1 · Answer 2 · answered Mar 10 '21 at 03:49

1

I am not using Tailwind so I just gonna give you the code that works.

.portrait {
    height: 100% !important;
    min-width: 100%;
    object-fit: cover;
}

In your second image remove whatever in there and use the "portrait" class. It's actually worked for the first image also if it's the effect you want.

answered Mar 10 '21 at 03:49

Co Pham

351
2
8

HI Co Pham. Thanks for the answer. This seems to pull the trick : see https://codepen.io/pasdut/pen/RwoqYQN – Pasduti Mar 10 '21 at 10:42

CSS : Object Cover doesn't center an image

2 Answers2