資料結構
網路
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+ 瀏覽量
