如何在 HTML 中实现此图像布局

Question

我想实现这种 5 张图片的布局，其中图片 1 在左侧较大，其余 4 张在其自己的列中位于右侧，如图所示。除了非常小的屏幕尺寸外，我希望此布局对于所有屏幕尺寸都保持不变。对于所有屏幕尺寸，左栏和右栏的高度应该相同。

有什么想法吗？

Answer 1

您要创建的是 css 网格。他们创建起来相当直接并且反应灵敏。这是一个关于如何制作您自己的自定义网格以及如何根据您的需要对其进行定制的教程 (YouTube Tutorial)。能够制作网格是一项非常有用的技能。

Answer 2

您可以使用 CSS 网格来实现它。 CSS教程参考here.

.grid-container {
  display: grid;
  grid-template-columns: 200px 200px 200px 200px;
  grid-template-rows: 150px 150px 150px 150px;
  grid-gap: 0 5px;
  justify-content: center;
}

.item1 {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 5;
}

@media screen and (max-width: 576px) {
  .grid-container {
    display: grid;
    grid-gap: 5px;
    grid-template-columns: 100%;
    grid-template-rows: 150px 150px 150px 150px 150px;
    justify-content: center;
  }
  .grid-container>img {
    width: 100%;
    height: 150px;
    object-fit: cover;
  }
  .item1 {
    grid-column-start: unset;
    grid-column-end: unset;
    grid-row-start: unset;
    grid-row-end: unset;
  }
}

<div class="grid-container">
  <img class="item1" src="https://picsum.photos/id/500/600/600">
  <img src="https://picsum.photos/id/600/200/150">
  <img src="https://picsum.photos/id/700/200/150">
  <img src="https://picsum.photos/id/800/200/150">
  <img src="https://picsum.photos/id/900/200/150">
</div>

如何在 HTML 中实现此图像布局

How to achieve this image layout in HTML

html

css

image

responsive-design

responsive