Dans cet article, nous apprendrons comment faire correspondre la largeur du texte à la largeur d'une image ou d'un titre de taille dynamique. Plongeons dans cet article pour en savoir plus sur la correspondance de la largeur du texte à la largeur de l'image.
Pour insérer une image dans une page Web ou un site Web, utilisez la balise HTML . Dans les sites Web modernes, les images sont liées aux pages Web à l'aide de l'élément
, qui contient l'espace réservé à l'image. Cela empêche les sites Web d'ajouter des images directement aux pages Web.
Voici la syntaxe de la balise
<img src="" alt="" width="" height="">
Jetons un coup d'œil aux exemples suivants pour obtenir plus d'idées sur la correspondance de la largeur du texte à la largeur de l'image.
Dans l'exemple ci-dessous, nous utilisons la balise et faisons en sorte que sa largeur corresponde à la largeur du texte.
<!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>Lorsque le script est exécuté, il générera une sortie contenant les images téléchargées sur la page Web et le texte au bas de chaque image affichée sur la page Web.
Considérez l'exemple suivant dans lequel nous intégrons du texte dans un tableau et faisons correspondre sa largeur à la largeur du texte.
<!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>Lorsque vous exécutez le code ci-dessus, une fenêtre de sortie apparaîtra contenant l'image insérée dans le tableau et le texte du tableau affiché sur la page Web.
Exécutez le script suivant et observez comment la largeur du texte correspond à la largeur de l'image.
<!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>Lorsque le script est exécuté, il générera une sortie composée d'une image et du texte affiché sur la page Web.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
