css flex 2x2网格全屏居中图像视图裁剪答案

【问题标题】：css flex 2x2 grid full screen with centered images view cropcss flex 2x2网格全屏居中图像视图裁剪
【发布时间】：2020-04-01 13:35:33
【问题描述】：

我有一个非常简单的 4 个图像标记，其目标是获得一个 2x2 响应式图像网格，它将：

在所有屏幕上保持 2x2 适合屏幕，无论大小如何，仅使用 flex。
保持图像居中并保持纵横比（“裁剪”它们根据屏幕需要查看）
能够在悬停时变换。
不改变标记（也不要问为什么）
尝试实现单个属性（或最小数量）可以将网格转换为 4 x 任何值（连续 4 个），这意味着不将标记更改为 2 的厨房行。

标记是：

 <div class="container">
       <div class="gallery">

          <img class="item" src="https://source.unsplash.com/random/" alt="Example image">
          <img class="item" src="https://source.unsplash.com/random/" alt="Example image">

         <img class="item" src="https://source.unsplash.com/random/" alt="Example image">
          <img class="item" src="https://source.unsplash.com/random/" alt="Example image">



       </div>

   </div>

还有CSS：

/** Add basic reset **/
.container {
    display: flex;
    /* flex-wrap: wrap; */
    /* justify-items: center; */
    justify-content: center;
    /* max-height: 100vh; */
    height: 100vh;
}
img {
    margin: 5px;
    transition: all 2s;
    flex-basis: 49%;
    max-height: 49vh;
    align-self: center;
    /* max-width: calc(49vh - 10px); */

}
.gallery {
    display: flex;
    flex-wrap: wrap;
    flex: 1 1 49%;
    align-items: center;
    overflow: hidden;
}
img:hover {
 transform: scale (1.1);
}

添加：

  img {
        object-fit: cover;
    }

有点作品，但它有一种“hack-ey”的感觉，并且还有两个主要问题（1）它确实会“裁剪”图像 - 但它们没有居中，并且（2）悬停时它们会从容器中“溢出”。

我确定这不是实现我需要的正确方法，但不确定我缺少什么 flex-property，或者在这里使用错误。

编辑我更清楚地附上了我想要实现的图像，其中每个都代表不同大小的屏幕/视口，没有任何滚动。图像需要始终居中并根据屏幕裁剪边缘（有点像全屏背景通常有效）

【问题讨论】：

标签： html css flexbox

【解决方案1】：

也许这可能会有所帮助，尽管我不完全确定我是否完全理解您的要求。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <style>
    * {
        box-sizing: border-box;
    }
    body {
        margin: 0;
    }
    .container {
        display: flex;
        flex-flow: row wrap;
        height: 100vh;
        width: 100vw;
        overflow: hidden;
    }
    .child {
        /* FOR 4 IN A GRID */
        flex: 1 0 50%;
        max-width: 50%; 
        max-height: 50%;

        /* FOR YOUR 4 IN 1 ROW */
        /* flex: 1 0 25%;
        max-width: 25%; */

        /* FOR BOTH */
        padding: 5px;
        object-fit: none;
    }
    .child:hover {
      transform: scale(1.1);
    }
  </style>
</head>
<body>
  <div class="container">
    <img src="https://images-na.ssl-images-amazon.com/images/I/81XYWLSWlOL._SX466_.jpg" class="child">
    <img src="https://images-na.ssl-images-amazon.com/images/I/81XYWLSWlOL._SX466_.jpg" class="child">
    <img src="https://images-na.ssl-images-amazon.com/images/I/81XYWLSWlOL._SX466_.jpg" class="child">
    <img src="https://images-na.ssl-images-amazon.com/images/I/81XYWLSWlOL._SX466_.jpg" class="child">
  </div> 
</body>
</html>

Updated Version

您可以添加媒体查询来设置容器本身的大小。

【讨论】：

感谢您的努力 - 但我需要网格以将屏幕显示为 2x2 并带有居中图像。一个普通的网格将是微不足道的。此外，不需要媒体查询，因为它应该对所有屏幕都相同。
@ObmerkKronen 我相信我现在拥有你想要的东西。它会检查您拥有的所有 4 个框。不久前我才想到你想要它是正方形的，这样它就会更像一个网格。这是对屏幕尺寸的响应。只是我的占位符图像的大小对于某些显示器来说可能太小了。
是的，那个看起来正是我想要的。我想我错过了box-sizing: border-box;.. 谢谢！快速提问，<meta name="viewport" content="width=device-width"> 在这里重要吗？
响应式设计很重要。没有这个，大多数浏览器倾向于缩小所有内容以适应屏幕，有了它，它会迫使浏览器有一个上限。