html - 如何通过以下方式使用 HTML 和 CSS 定位 3 个图像？

Question

我正在寻找最简单的方法，使用 CSS 和 HTML 以下列方式定位三个图像

图像编号 2 和 3 的宽度和高度应为图像编号 1 的 50%。

先感谢您

标签： htmlcss

Answer 1

您可以使用网格来执行此操作

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  width: 100%;
  grid-gap: 4px;
}

img {
  max-width: 100%;
}

img:first-child {
  max-width: unset;
  height: 100%;
  width: 100%;
  object-fit: cover;
  grid-row: span 2;
}

<div class="grid">
  <img src="https://images.unsplash.com/photo-1618326985678-88285545a9aa?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYyMDc5OTgyNA&ixlib=rb-1.2.1&q=85" alt="">
  <img src="https://images.unsplash.com/photo-1618326985678-88285545a9aa?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYyMDc5OTgyNA&ixlib=rb-1.2.1&q=85" alt="">
  <img src="https://images.unsplash.com/photo-1618326985678-88285545a9aa?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYyMDc5OTgyNA&ixlib=rb-1.2.1&q=85" alt="">
</div>