html - CSS : Object Cover doesn't center an image

Question

我正在尝试创建一个缩略图网格，主要用于移动设备。

图像大小未知:它来自输入，大小取决于手机上的相机。 所以我事先不知道照片是横向还是纵向。因此两个缩略图的样式应该相同。

对于横向图像，我希望它显示完整高度并水平居中。对于肖像图像，我想显示图像的整个宽度并垂直居中。

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

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

我猜object-fit: cover;是最合适的。

这适用于风景图像(请参阅 codepen:右边的男人不是 showw，这是预期的)

不幸的是，这不适用于肖像图像。宽度已正确缩放为拇指的宽度，但图像未垂直居中。 (参见codepen:建筑物的顶部仍然可见，而前面的人消失了。我期望的是建筑物的顶部不再可见，如果该人完全可见，则头部不再可见。我可以用翻译来解决这个问题，但是那么相同的代码将不适用于肖像。

请参阅 codepen，使用 Tailwind https://codepen.io/pasdut/pen/MWbzvzX

更新:我事先不知道图像是纵向还是横向

Answer 1

如果你给出肖像图像height: 100%它将在其容器中水平和垂直居中图像，并与 object-fit: cover 配对。 。您只需添加 h-full缩略图 #2 的顺风级 <img>元素使其具有 height: 100% .

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