CSS：Object 封面未居中圖像

Question

我正在嘗試創建一個縮略圖網格，主要用於移動設備。

圖片大小未知：來自一個Input，大小取決於手機上的攝像頭。 所以我事先不知道照片是橫向還是縱向。 因此，兩個縮略圖的樣式應該相同。

對於橫向圖像，我希望它顯示為全高並水平居中。 對於縱向圖像，我想顯示圖像的整個寬度並垂直居中。

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

我沒有使用 Tailwind，所以我只會給你有效的代碼。

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

在您的第二張圖片中刪除其中的任何內容並使用“肖像”class。 如果它是您想要的效果，它實際上也適用於第一張圖像。

Answer 2

如果您給縱向圖像height: 100% ，它將在與object-fit: cover配對的容器中水平和垂直居中圖像。 您只需將h-full tailwind class 添加到縮略圖 #2 <img>元素，因為它的height: 100% 。 看看正在運行的CodePen 演示。

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