按照预定义的模式将图像彼此相邻对齐 css

Question

我有以下图像布局，其中图像并排对齐。

CSS

      <style>
* {
  box-sizing: border-box;
}

.column {
  float: left;
  width: 33.33%;
  padding: 4px;
}


.row::after {
  content: "";
  clear: both;
  display: table;
}
.res-img {
   width:100%;
  height: auto;
  border-style:solid;
  border-color:gray;
}

  </style>

但我希望它像下图一样显示，最好是响应式的，这意味着图像在小屏幕上相互堆叠。有人可以告诉我如何实现吗？

HTML

<div class="row">
  <div class="column">
    <img src="img.jpg" alt="" class="res-img">
  </div>
  <div class="column">
    <img src="img.jpg" alt="" class="res-img">
  </div>
  <div class="column">
    <img src="img.jpg" alt="" class="res-img">
  </div>
</div>

Answer 1

您可以使用 CSS 网格布局：检查 CSS 网格布局：https://cssgrid-generator.netlify.app/

.row {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-column-gap: 10px;
grid-row-gap: 10px;
height:200px;
}
.div1 { grid-area: 1 / 1 / 2 / 2;}
.div2 { grid-area: 1 / 2 / 2 / 3;}
.div3 { grid-area: 2 / 1 / 3 / 2;}
.div4 { grid-area: 2 / 2 / 3 / 3;}
.div5 { grid-area: 1 / 3 / 3 / 4;}
.col{
  height:100%; width:100%;
  border:1px solid #000;
}

<div class="row">
<div class="div1 col">img1 </div>
<div class="div2 col">img2 </div>
<div class="div3 col">img3 </div>
<div class="div4 col">img4 </div>
<div class="div5 col">img5 </div>
</div>

Answer 2

做一个wrapper-element并使用grid-template-rows: 1fr 1fr和grid-template-columns: 1fr 1fr 1fr，这是一个3列2行的布局。您可以选择将它们的值设置为 auto，因为您已经在网格中使用 span 来制作布局（进一步阅读以了解详情）。

.wrapper {
  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

确保每个 img 都包装到一个容器中，以便更好地控制布局。没有必要，但我认为更可取。将 flex 添加到 img-容器，然后应用 object-fit: cover，这样图像就不会拉伸。这将导致图像被裁剪一些，但不会被拉伸 - 我认为这也是可取的，但不是必需的。

此外，请确保在 img 元素上应用 max-width: 100% 和 height: auto，这样图像会自动响应并且不会溢出容器。

.item {
  border: 1px solid black;
  display: flex;
}

.item img {
  object-fit: cover;
  max-width: 100%;
  height: auto;
}

对于需要2行高度的元素，可以使用grid-span。要将元素设置为最后一列（第 3 列），请使用 grid-column: 3/3。使用 grid-row: 1 / span 2 使项目进入布局的第 1 行并扩展到第二行。

.item.large {
  grid-column: 3 / 3;
  grid-row: 1 / span 2;
}

为了使整个事情响应，只需将 .item.large 元素上的值修改为自动，同时在 media-query:

中设置您喜欢的列和行的数量

@media only screen and (max-width: 768px) {
  .wrapper {
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: 1fr;
  }
  .item.large {
    grid-column: auto;
    grid-row: auto;
  }
}

.wrapper {
  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

.item {
  border: 1px solid black;
  display: flex;
}

.item img {
  object-fit: cover;
  max-width: 100%;
  height: auto;
}

.item.large {
  grid-column: 3 / 3;
  grid-row: 1 / span 2;
}

@media only screen and (max-width: 768px) {
  .wrapper {
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: 1fr;
  }
  .item.large {
    grid-column: auto;
    grid-row: auto;
  }
  .item img {
    width: 100%;
  }
}

<div class="wrapper">
  <div class="item"><img src="https://www.fillmurray.com/640/360"></div>
  <div class="item"><img src="https://www.fillmurray.com/640/360"></div>
  <div class="item large"><img src="https://www.fillmurray.com/640/360"></div>
  <div class="item"><img src="https://www.fillmurray.com/640/360"></div>
  <div class="item"><img src="https://www.fillmurray.com/640/360"></div>
</div>

按照预定义的模式将图像彼此相邻对齐 css

align images with css next to eachother on predifined pattern

css

responsive