Web-Frontend
HTML-Tutorial
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?
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 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>
<h2>The Best E-Learning</h2>
</div>
<div class="tutorial">
<img>
<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!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1392
52
Ist HTML für Anfänger leicht zu lernen?
Apr 07, 2025 am 12:11 AM
HTML ist für Anfänger geeignet, da es einfach und leicht zu lernen ist und schnell Ergebnisse sehen kann. 1) Die Lernkurve von HTML ist glatt und leicht zu beginnen. 2) Beherrschen Sie einfach die grundlegenden Tags, um Webseiten zu erstellen. 3) hohe Flexibilität und kann in Kombination mit CSS und JavaScript verwendet werden. 4) Reiche Lernressourcen und moderne Tools unterstützen den Lernprozess.
Die Rollen von HTML, CSS und JavaScript: Kernverantwortung
Apr 08, 2025 pm 07:05 PM
HTML definiert die Webstruktur, CSS ist für Stil und Layout verantwortlich, und JavaScript ergibt eine dynamische Interaktion. Die drei erfüllen ihre Aufgaben in der Webentwicklung und erstellen gemeinsam eine farbenfrohe Website.
Was ist ein Beispiel für ein Start -Tag in HTML?
Apr 06, 2025 am 12:04 AM
AnexampleofaTartingTaginHtmlis, die, die starttagsaresesinginhtmlastheyinitiateElements, definetheirtypes, andarecrucialForstructuringwebpages und -konstruktionsthedoms.
HTML, CSS und JavaScript verstehen: Ein Anfängerhandbuch
Apr 12, 2025 am 12:02 AM
WebdevelopmentRelieSonHtml, CSS und JavaScript: 1) HtmlStructuresContent, 2) CSSstylesit und 3) JavaScriptaddssinteraktivität, Bildung von TheBasisofModerernwebexperiences.
Gitee Pages statische Website -Bereitstellung fehlgeschlagen: Wie können Sie einzelne Dateien 404 Fehler beheben und beheben?
Apr 04, 2025 pm 11:54 PM
GitePages statische Website -Bereitstellung fehlgeschlagen: 404 Fehlerbehebung und Auflösung bei der Verwendung von Gitee ...
Wie kann man adaptives Layout der Y-Achse-Position in Webanmerkungen implementieren?
Apr 04, 2025 pm 11:30 PM
Der ad-axis-Position adaptive Algorithmus für Webanmerkungen In diesem Artikel wird untersucht, wie Annotationsfunktionen ähnlich wie Word-Dokumente implementiert werden, insbesondere wie man mit dem Intervall zwischen Anmerkungen umgeht ...
Wie verwendet ich CSS3 und JavaScript, um den Effekt der Streuung und Vergrößerung der umgebenden Bilder nach dem Klicken zu erreichen?
Apr 05, 2025 am 06:15 AM
Um den Effekt der Streuung und Vergrößerung der umgebenden Bilder nach dem Klicken auf das Bild zu erreichen, müssen viele Webdesigns einen interaktiven Effekt erzielen: Klicken Sie auf ein bestimmtes Bild, um die Umgebung zu machen ...
Warum müssen Sie Vue.use (Vuerouter) in der Datei idex.js unter dem Router -Ordner anrufen?
Apr 05, 2025 pm 01:03 PM
Die Notwendigkeit der Registrierung von Vuerouter in der Datei index.js -Datei im Ordner Router Bei der Entwicklung von VUE -Anwendungen stoßen Sie häufig Probleme mit der Routing -Konfiguration. Besonders...
