Html CSS：对象覆盖不'；使图像居中

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

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

对于风景图片，我希望它显示全高和水平居中。 对于肖像图像，我想显示图像的全宽和垂直居中

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

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

我猜

对象适合：封面最合适

这适用于风景图像（请参见代码笔：右边的人不是showw，这是预期的）

不幸的是，这不适用于肖像图像。宽度已正确缩放为拇指的宽度，但图像未垂直居中。（参见codepen：当前面的人消失时，建筑物的顶部仍然可见。我所期望的是建筑物的顶部不再可见，如果该人完全可见，则头部也不可见。我可以通过翻译来解决这个问题，但同样的代码对肖像不起作用

请参见代码笔，使用顺风

更新：我事先不知道图像是纵向的还是横向的
我没有使用“顺风”，所以我只想给你一些有效的代码

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

在第二张图像中，删除其中的任何内容并使用“肖像”类。如果第一张图像是您想要的效果，它实际上也适用于第一张图像。
如果您为肖像图像提供
高度：100%
它将在容器中水平和垂直居中图像，并与
对象适合度：封面
配对。您只需将
h-full
尾风类添加到缩略图#2


HI-Co-Pham。谢谢你的回答。这似乎很有意思：看HI-Tanner，谢谢你的回答。这似乎也适用于风景图片。我已经在工作代码笔中添加了真实图片，虽然这个答案是正确的，但这并不总是适用于Chrome。看。将在Chrome 89中修复吗？@Pasduti是的，我读过关于<代码>对象匹配

Chrome中的浏览器错误。在Chrome团队修复错误之前，我们无能为力。

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