css - 在图库中，如何使我的肖像图像变大以填充整个 div 同时保持其居中？

Question

我已阅读其他答案，但找不到适合我的答案。我正在尝试创建一个图片库，它既能响应又能拍摄不同大小和方向的图像，即有些是风景，有些是肖像。我想要它，无论它的大小或方向如何，它都会填充 div 的大小并在其中居中。

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

我怎样才能得到它，以便无论图像的大小如何，它都会不拉伸(stretch)地填充 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

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