如何將文字的寬度與動態調整大小的圖像/標題的寬度相符？-html教學-PHP中文網

將文字寬度與圖像寬度相符

文法

範例

首頁

web前端

html教學

如何將文字的寬度與動態調整大小的圖像/標題的寬度相符？

王林

Aug 26, 2023 pm 01:17 PM

動態調整文字寬度匹配影像大小

在本文中，我們將學習如何將文字寬度與動態大小的圖像或標題的寬度相匹配。讓我們進入本文，以了解有關將文字寬度與圖像寬度相符的更多資訊。

將文字寬度與圖像寬度相符

要在網頁或網站內插入圖像，請使用 HTML 如何將文字的寬度與動態調整大小的圖像/標題的寬度相符？標記。在現代網站中，圖像使用元素連結到網頁，該元素包含圖像的空間。這可以防止網站直接向網頁添加圖像。

文法

以下是如何將文字的寬度與動態調整大小的圖像/標題的寬度相符？標籤的語法

<img alt="" width="" height="">

登入後複製

讓我們看看以下範例，以獲取有關將文字寬度與圖像寬度相符的更多想法。

範例

在下面的範例中，我們使用如何將文字的寬度與動態調整大小的圖像/標題的寬度相符？標籤並使其寬度與文字寬度相符。

<!DOCTYPE html>
<html>
   <body>
      <style>
         .tutorial {
            background: #EAFAF1 ;
            display:inline-block;
         }
         img {
            width:0;
            min-width:100%;
         }
      </style>
      <div class="tutorial">
         <img>
         <h2>The Best E-Learning</h2>
      </div>
      <div class="tutorial">
         <img>
         <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://www.tutorialspoint.com/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://img.php.cn/upload/article/000/465/014/169302702977593.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>

登入後複製

執行腳本時，它將產生一個由圖像和網頁上顯示的文字組成的輸出。

以上是如何將文字的寬度與動態調整大小的圖像/標題的寬度相符？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7845

Java教學

1649

CakePHP 教程

1403

Laravel 教程

1300

PHP教程

1241

Related knowledge

HTML容易為初學者學習嗎？ Apr 07, 2025 am 12:11 AM

HTML適合初學者學習，因為它簡單易學且能快速看到成果。 1)HTML的學習曲線平緩，易於上手。 2)只需掌握基本標籤即可開始創建網頁。 3)靈活性高，可與CSS和JavaScript結合使用。 4)豐富的學習資源和現代工具支持學習過程。

HTML，CSS和JavaScript的角色：核心職責 Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構，CSS負責樣式和佈局，JavaScript賦予動態交互。三者在網頁開發中各司其職，共同構建豐富多彩的網站。

了解HTML，CSS和JavaScript：初學者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

Gitee Pages靜態網站部署失敗：單個文件404錯誤如何排查和解決？ Apr 04, 2025 pm 11:54 PM

GiteePages靜態網站部署失敗：404錯誤排查與解決在使用Gitee...

HTML中起始標籤的示例是什麼？ Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。