Wie kann ich die Breite des Textes an die Breite eines Bildes/Titels mit dynamischer Größenänderung anpassen?-HTML-Tutorial-php.cn

Wie kann ich die Breite des Textes an die Breite eines Bildes/Titels mit dynamischer Größenänderung anpassen?

王林

Freigeben： 2023-08-26 13:17:06

nach vorne

1234 Leute haben es durchsucht

In diesem Artikel erfahren Sie, wie Sie die Textbreite an die Breite eines Bildes oder Titels mit dynamischer Größe anpassen. Lassen Sie uns in diesen Artikel eintauchen, um mehr über die Anpassung der Textbreite an die Bildbreite zu erfahren.

Passen Sie die Textbreite an die Bildbreite an

Um ein Bild in eine Webseite oder Website einzufügen, verwenden Sie das HTML-Tag Wie kann ich die Breite des Textes an die Breite eines Bildes/Titels mit dynamischer Größenänderung anpassen? . Auf modernen Websites werden Bilder über das -Element, das den Platz für das Bild enthält, mit Webseiten verlinkt. Dadurch wird verhindert, dass Websites Bilder direkt zu Webseiten hinzufügen.

Grammatik

Das Folgende ist die Syntax des Wie kann ich die Breite des Textes an die Breite eines Bildes/Titels mit dynamischer Größenänderung anpassen? -Tags

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

Nach dem Login kopieren

Sehen wir uns die folgenden Beispiele an, um weitere Ideen zur Anpassung der Textbreite an die Bildbreite zu erhalten.

Beispiel

Im folgenden Beispiel verwenden wir das Tag Wie kann ich die Breite des Textes an die Breite eines Bildes/Titels mit dynamischer Größenänderung anpassen? und passen seine Breite an die Textbreite an.

<!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>

Nach dem Login kopieren

Wenn das Skript ausgeführt wird, generiert es eine Ausgabe, die die hochgeladenen Bilder auf der Webseite und den Text am unteren Rand jedes auf der Webseite angezeigten Bildes enthält.

Beispiel

Betrachten Sie das folgende Beispiel, in dem wir Text in eine Tabelle einbetten und seine Breite an die Breite des Textes anpassen.

<!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>

Nach dem Login kopieren

Wenn Sie den obigen Code ausführen, wird ein Ausgabefenster angezeigt, das das in die Tabelle eingefügte Bild und den Text in der auf der Webseite angezeigten Tabelle enthält.

Beispiel

Führen Sie das folgende Skript aus und beobachten Sie, wie die Textbreite mit der Bildbreite übereinstimmt.

<!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>

Nach dem Login kopieren

Wenn das Skript ausgeführt wird, generiert es eine Ausgabe bestehend aus einem Bild und dem auf der Webseite angezeigten Text.

Das obige ist der detaillierte Inhalt vonWie kann ich die Breite des Textes an die Breite eines Bildes/Titels mit dynamischer Größenänderung anpassen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!