📌  相关文章
📜  如何创建一个包含多个固定大小图像的 div?(1)

📅  最后修改于: 2023-12-03 15:38:10.097000             🧑  作者: Mango

如何创建一个包含多个固定大小图像的 div?

如果你想要在一个 div 中展示多个固定大小的图像,可以使用以下的 HTML 和 CSS 代码实现。

HTML 代码片段
<div class="image-container">
  <img src="image1.jpg" alt="image1" class="fixed-size-image">
  <img src="image2.jpg" alt="image2" class="fixed-size-image">
  <img src="image3.jpg" alt="image3" class="fixed-size-image">
  <img src="image4.jpg" alt="image4" class="fixed-size-image">
</div>

在 div 中嵌套了多个 img 标签,每个标签都指定了一个图片文件和 alt 属性,而 class 属性为每个图片统一设定了一个名为 fixed-size-image 的 CSS 类。

CSS 代码片段
.image-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.fixed-size-image {
  width: 300px;
  height: 200px;
  object-fit: cover;
  margin: 10px;
}

其中,image-container 类规定了图片的排列方式为 flex 布局,并居中排列。

而 fixed-size-image 类则规定了每个图片的宽度和高度,并使用 object-fit 属性设置图片在固定大小区域内缩放展示,margin 属性使每个图片之间有一定的间隔。

以上的 HTML 和 CSS 代码片段可以展示多个固定大小的图片在一个区域内。