Heim > Artikel > Web-Frontend > Wie kann ich die Breite des Textes an die Breite eines Bildes/Titels mit dynamischer Größenänderung anpassen?
Wie kann ich die Breite des Textes an die Breite eines Bildes/Titels mit dynamischer Größenänderung anpassen?
- 王林nach vorne
- 2023-08-26 13:17:061235Durchsuche
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 . 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 -Tags
<img src="" alt="" width="" height="">
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 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>
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>
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>
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!