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

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

王林

發布： 2023-08-26 13:17:06

轉載

1234 人瀏覽過

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

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

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

文法

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

<img src="" 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 src="https://img.php.cn/upload/article/000/465/014/169302702977593.png">
         <h2>The Best E-Learning</h2>
      </div>
      <div class="tutorial">
         <img src="https://img.php.cn/upload/article/000/465/014/169302702977593.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://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中文網其他相關文章！