数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何创建包含多个固定尺寸图像的 div
概述
要使图像大小固定，可以通过设置 <img> 标签的样式来实现。我们可以通过标签名称、类名或 ID 名来设置每个 <img> 标签的宽度和高度。唯一需要注意的是，在设置样式时，必须小心使用“.”、“#”、“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 属性设置为 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 标签中的内部样式表中设置一次。
结论
使用外部样式表的优点是我们可以选择一个标签并设置其宽度和高度。因此，将来无论在父 div 中添加多少个图像，图像的大小都将与上面显示的图像相同。此类任务用于开发移动画廊、创建课程目录等应用程序。在这种情况下，使用内联样式毫无用处，因为它会使代码更加混乱。
1K+ 浏览量
