如何在HTML中将4个图像对齐为2*2？

在HTML中将4个图像对齐为2*2的布局，可以使用CSS的网格布局（Grid Layout）来实现。以下是一个示例代码：

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-gap: 10px;
}

.container img {
  width: 100%;
  height: auto;
}
</style>
</head>
<body>

<div class="container">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
  <img src="image4.jpg" alt="Image 4">
</div>

</body>
</html>

在上述代码中，我们创建了一个名为container的div容器，并将其设置为网格布局。通过grid-template-columns和grid-template-rows属性，我们定义了容器的行和列的数量和大小。repeat(2, 1fr)表示重复两次，每个项目的大小为1fr（等分剩余空间）。grid-gap属性用于设置项目之间的间距。

在容器中，我们放置了四个img元素，分别代表四个图像。通过设置img元素的宽度为100%和高度为auto，可以确保图像按比例缩放并适应容器大小。

这样，四个图像就会以2*2的布局对齐显示在HTML页面中。

腾讯云相关产品和产品介绍链接地址：