如何在 HTML 中实现这种图像布局答案

【问题标题】：How to achieve this image layout in HTML如何在 HTML 中实现这种图像布局
【发布时间】：2020-09-06 01:39:47
【问题描述】：

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

有什么想法吗？

【问题讨论】：

标签： html css image responsive-design responsive

【解决方案1】：

您想要创建的是一个 CSS 网格。他们是相当直接的创造和非常敏感的。这是一个关于如何制作您自己的自定义网格以及如何根据您的需要定制网格的教程 (YouTube Tutorial)。能够制作网格是一项非常有用的技能。

【讨论】：

非常感谢您向我介绍网格。像魅力一样工作。再次感谢您的帮助。 :)

【解决方案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>

【讨论】：

感谢您的帮助。 Grids 改变了游戏规则。
很高兴我能提供帮助。