我用flex給了幾列相等的寬度。每個都包含img標簽，我希望這些圖像展示適合的對象:封面尺寸。

.container {
  display: flex;
  flex-direction: row;
  width: 100%;
}
.test {
  flex: 1;
  margin-right: 1rem;
  overflow: hidden;
  height: 400px;
}
img {
  object-fit: cover;
}

<div class="container">
  <div class="test"><img src="http://placehold.it/1920x1080"></div>
  <div class="test"><img src="http://placehold.it/1920x1080"></div>
  <div class="test"><img src="http://placehold.it/1920x1080"></div>
  <div class="test"><img src="http://placehold.it/1920x1080"></div>
</div>

從規格來看:

對象適配屬性指定如何替換 元件應安裝到根據其使用高度確定的盒子中，并且 寬度。

關鍵術語是:適合由它的使用高度和寬度建立的盒子

圖像被替換，而不是它的容器。并且由它所使用的高度和寬度建立的框與圖像本身相關，而不是它的容器。

因此，廢棄容器，讓圖像本身成為flex項目。

.container {
  display: flex;
  flex-direction: row;
  width: 100%;
}

img {
  object-fit: cover;
  flex: 1;
  margin-right: 1rem;
  overflow: hidden;
  height: 400px;
}

<div class="container">
  <img src="http://placehold.it/1920x1080">
  <img src="http://placehold.it/1920x1080">
  <img src="http://placehold.it/1920x1080">
  <img src="http://placehold.it/1920x1080">
</div>

問題是object-fit指定了如何在img中繪制圖像，但是您沒有指定這些元素的大小，只指定了它們的。考驗父母。

因此，除了Michael_B的答案之外，另一種方法是讓圖像具有與flex項目相同的大小:

img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.container {
  display: flex;
  flex-direction: row;
  width: 100%;
}
.test {
  flex: 1;
  margin-right: 1rem;
  overflow: hidden;
  height: 400px;
}
img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

<div class="container">
  <div class="test"><img src="http://placehold.it/1920x1080"></div>
  <div class="test"><img src="http://placehold.it/1920x1080"></div>
  <div class="test"><img src="http://placehold.it/1920x1080"></div>
  <div class="test"><img src="http://placehold.it/1920x1080"></div>
</div>

對于那些不能“廢棄容器并使圖像本身成為flex項目”的人，只需添加容器級別:

<div class="display-flex">
  <div class="flex-grow position-relative">
    <div class="pos-absolute top-left-right-bottom-0">
      <img class="object-fit-cover height-width-100">

為了在不兼容的瀏覽器中支持圖像的對象適配功能，您可以創建一個具有背景圖像和背景大小的CSS類。為了讓它正確計算占用的空間，您需要包裝一個img元素并使其不可見。下面的例子。

超文本標記語言

<div class="my-image">
    <img src="path/to/my/image"/>
</div>

半鑄鋼?鋼性鑄鐵(Cast Semi-Steel)

.my-image {
    background-image: url('path/to/my/image');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.my-image > img {
    visibility: hidden;
}

使用Bootstrap 5，您可以通過這種設置實現這一點；

<div class="d-flex align-items-center justify-content-center text-center position-relative overflow-hidden vh-100">

  <!-- Put a higher z-index on this one -->
  <div class="container-fluid container-lg py-5 py-lg-10">
    <h1>Your content</h1>
  </div>

  <div class="position-absolute top-0 end-0 bottom-0 start-0">
    <img src="https://placehold.co/600x400" alt="" class="d-none d-lg-block w-100 h-100">
  </div>

</div>

如果& ltimg/>；在IE11中被拉伸到100%,然后在& ltimg/>；本身，正如這里建議的:IE11上的Flexbox:圖像無緣無故拉伸？