資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何使文字寬度與動態大小的影像/標題寬度匹配？
在本文中，我們將學習如何使文字的寬度與動態大小的影像或標題的寬度匹配。讓我們進入本文，瞭解更多關於如何使文字寬度與影像寬度匹配的資訊。
使文字寬度與影像寬度匹配
要在網頁或網站中插入影像，請使用 HTML <img> 標籤。在現代網站中，影像使用 <img> 元素連結到網頁，該元素包含影像的空間。這可以防止網站直接將影像新增到網頁中。
語法
<img> 標籤的語法如下所示
<img src="" alt="" width="" height="">
讓我們看看以下示例，以更深入地瞭解如何使文字寬度與影像寬度匹配。
示例
在以下示例中，我們使用 <img> 標籤，並使其寬度與文字寬度匹配。
<!DOCTYPE html>
<html>
<body>
<style>
.tutorial {
background: #EAFAF1 ;
display:inline-block;
}
img {
width:0;
min-width:100%;
}
</style>
<div class="tutorial">
<img src="https://tutorialspoint.tw/images/logo.png">
<h2>The Best E-Learning</h2>
</div>
<div class="tutorial">
<img src="https://tutorialspoint.tw/images/logo.png">
<h2>Find A Lot Of Courses</h2>
</div>
</body>
</html>
當指令碼執行時，它將生成一個輸出，其中包含上傳到網頁上的影像以及顯示在網頁上每個影像底部的文字。
示例
考慮以下示例，我們將在其中使文字嵌入到表格中，並使其寬度與文字寬度匹配。
<!DOCTYPE html>
<html>
<body>
<style>
table {
display: table;
border:1px solid #52BE80;
}
td {
padding: 6px;
text-align: center;
border:1px solid #52BE80;
}
.tutorial{
width: 0;
min-width: 100%;
display: block;
}
</style>
<table>
<tr>
<td>Welcome</td>
<td>To</td>
<td>TP</td>
</tr>
<tr>
<td colspan="3"><img src="https://tutorialspoint.tw/java/images/java-mini-logo.jpg" class="tutorial"></td>
</tr>
</table>
</body>
</html>
執行以上程式碼後，將彈出輸出視窗，其中包含插入到表格中的影像以及顯示在網頁上的表格中的文字。
示例
執行以下指令碼，並觀察文字寬度如何與影像寬度匹配。
<!DOCTYPE html>
<html>
<body>
<style>
.tutorial {
background: white;
display: inline-block;
}
img {
display: block;
max-height: 70vh;
}
.parent {
background: grey;
display: inline-block;
}
.description {
width: 0;
min-width: 100%;
}
</style>
<div class="parent">
<img src="https://tutorialspoint.tw/images/logo.png">
<div class="description">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
</body>
</html>
當指令碼執行時，它將生成一個輸出，其中包含一個影像以及顯示在網頁上的文字。
更新於: 2023年4月20日
203 次檢視
廣告