在画廊中，如何使我的肖像图像更大以填充整个 div 同时保持居中？

Question

我已阅读其他答案，但找不到适合我的答案。我正在尝试创建一个响应式图像库，并采用不同大小和方向的图像，即有些是横向的，有些是纵向的。我想要它，这样无论它的大小或方向如何，它都会填充 div 的大小并在其中居中。

目前，div 的高度为 250px，宽度为容器的 23%。这是我能得到的最好的。使用这种方法，横向图像显示良好，但纵向图像的两侧都有空白，因为它没有占用完整的 div。

我怎样才能得到它，以便无论图像的大小如何，它都会填充 div 而不拉伸它？我不介意图像是否更大并通过溢出被切断：只要它完全覆盖 div，就隐藏起来。

编辑：纠正了我所说的图像容器宽度的大小，因为我说错了。

这是我的代码：

CSS

.gallery-container {
    width: 90%;
    margin: 0 auto;
}


.image-container {
    float: left;
    position: relative;
    overflow: hidden;
    height: 250px;
    margin: 5px;
    border: 1px solid #ccc;
    width: 23%;
}

div.image-container:hover {
    border: 1px solid #777;
}

div.image-container img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate( -50%, -50%);
    height: 100%;
    
}

HTML
   <div class="gallery-container">
    
    <div class="image-container">
           <a target="_blank" href="img/60.jpg">
               <img src="img/60.jpg" alt="flowers">
           </a>
           <!-- <div class="desc">Add a description here
                  
               </div> -->
    </div>
      <div class="image-container">
           <a target="_blank" href="img/portrait.jpg">
               <img src="img/portrait.jpg" alt="portrait">
           </a>
           <!-- <div class="desc">Add a description here</div> -->
       
    </div>
      <div class="image-container">
           <a target="_blank" href="img/flowers2.jpg">
               <img src="img/flowers2.jpg" alt="flowers2">
           </a>
           <!-- <div class="desc">Add a description here</div> -->
       
    </div>
    </div>

Answer 1

object-fit and object-position 是专门用于 replaced elements 行为的 CSS 属性，例如 <img> 和 <video>。像这样应用：

div.image-container img {
  /* Added */
  width: 100%;
  height: 100%;
  /* Added */
  object-position: 50% 50%;
  /* Added */
  object-fit: cover;
}

这个特定的规则集将渲染<img>，这样它就会边到边地填充其父容器而不会失真但是如果父容器的尺寸与图像的 AR（Aspect比率）。

要使一系列元素居中，display:flex and justify-content:center 就足够了：

.gallery-container {
  width: 90%;
  margin: 0 auto;
  /* Added */
  display: flex;
  /* Added */
  justify-content: center;
}

演示

.gallery-container {
  width: 90%;
  margin: 0 auto;
  /* Added */
  display: flex;
  /* Added */
  justify-content: center;
}

.image-container {
  overflow: hidden;
  height: 250px;
  margin: 5px;
  border: 1px solid #ccc;
  width: 23%;
}

div.image-container:hover {
  border: 1px solid #777;
}

div.image-container img {
  /* Added */
  width: 100%;
  height: 100%;
  /* Added */
  object-position: 50% 50%;
  /* Added */
  object-fit: cover;
}

<div class="gallery-container">

  <div class="image-container">
    <a target="_blank" href="img/60.jpg">
      <img src="https://interactive-examples.mdn.mozilla.net/media/examples/plumeria.jpg" alt="flowers">
    </a>
    <!-- <div class="desc">Add a description here
                  
               </div> -->
  </div>
  <div class="image-container">
    <a target="_blank" href="img/portrait.jpg">
      <img src="https://interactive-examples.mdn.mozilla.net/media/examples/plumeria.jpg" alt="portrait">
    </a>
    <!-- <div class="desc">Add a description here</div> -->

  </div>
  <div class="image-container">
    <a target="_blank" href="img/flowers2.jpg">
      <img src="https://interactive-examples.mdn.mozilla.net/media/examples/plumeria.jpg" alt="flowers2">
    </a>
    <!-- <div class="desc">Add a description here</div> -->

  </div>
</div>

Answer 2

div.image-container img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate( -50%, -50%);
    width:100%;    

}