如何创建包含多个固定大小图片的 div

htmlweb developmentfront end technology更新于 2024/3/19 14:36:17

概述

可以通过设置 <img> 标签的样式来创建固定大小的图片。我们可以为每个 <img> 标签设置样式，并通过其标签名、类名或 ID 名设置其宽度和高度。唯一需要注意的是，在设置样式时，我们必须谨慎使用"."、"#"和"tag"。由于标签名可以直接用于样式，而类名和 ID 名不能直接使用，因此它们分别以".className"、"#idName"结尾。

方法

实现此任务的主要方法是在样式表中仅对 <img> 标签进行一次样式设置，样式表可以是内部样式表，也可以是外部样式表。我们也可以使用 img 标签的 width 和 height 属性来使图像具有固定大小，但这样做会使代码变得更加复杂或混乱。

算法

步骤 1 − 创建一个 HTML 样板代码，并在其中创建一个父 div 标签，并为其指定类名。

步骤 2 − 现在创建一些 <img> HTML 标签默认包含两个属性:src=" " 和 alt=" "。请在 src 属性中添加图片链接。"src" 属性也可以包含当前工作目录中的地址。

<img src="" alt="">

步骤 3 − 在代码的 head 标签内创建标签

.<style> </style>

步骤 4 − 现在通过选择父 div 的类名来设置其样式。

.imageGallery {
   display: flex;
   flex-wrap: wrap;
   gap: 3rem;
   justify-content: center;
}

步骤 5−选择标签并设置其宽度和高度。"img"标签的样式将反映所有当前图片和即将显示的图片的样式。

img {
   width: 10rem;
   height: 10rem;
   border-radius: 8px;
   box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.489);
}

示例

在本例中，我们创建了三个 img 标签，因此所有这些 <img> 标签都通过设置宽度和高度来定位并固定大小。因此，设置图像的宽度和高度后，所有图像的大小都相同。我们还设置了父 div 的样式，并使其 display 为 flex 和 flex-wrap 属性，从而实现响应式页面。

<html>
<head>
   <title>div contains multiple images of fixed size</title>
   <style>
      .imageGallery {
         display: flex;
         flex-wrap: wrap;
         gap: 3rem;
         justify-content: center;
      }
      img {
         width: 10rem;
         height: 10rem;
         border-radius: 8px;
         box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.489);
      }
   </style>
</head>
<body>
   <p style="text-align: center;font-size: 5vw;text-decoration: underline;"> Fixed Size Images </p>
   <div class="imageGallery">
      <img src="https://d3mxt5v3yxgcsr.cloudfront.net/courses/3903/course_3903_image.png" alt="pythonTraining">
      <img src="https://d3mxt5v3yxgcsr.cloudfront.net/courses/1895/course_1895_image.png" alt="tableauTraining">
      <img src="https://d3mxt5v3yxgcsr.cloudfront.net/courses/6584/course_6584_image.jpg" alt="htmlCsstTraining">
   </div>
</body>
</html>

下图中，所有图片均为固定大小，宽度为"18rem"，高度为"10rem"。图片大小在代码 head 标签的内部样式表中一次性设置。