Comment puis-je faire correspondre la largeur du texte à la largeur d'une image/titre redimensionné dynamiquement ?-tutoriel HTML-php.cn

Comment puis-je faire correspondre la largeur du texte à la largeur d'une image/titre redimensionné dynamiquement ?

王林

Libérer： 2023-08-26 13:17:06

avant

1252 Les gens l'ont consulté

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.

Faire correspondre la largeur du texte avec la largeur de l'image

Pour insérer une image dans une page Web ou un site Web, utilisez la balise HTML Comment puis-je faire correspondre la largeur du texte à la largeur d'une image/titre redimensionné dynamiquement ? . 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.

Grammaire

Voici la syntaxe de la balise Comment puis-je faire correspondre la largeur du texte à la largeur d'une image/titre redimensionné dynamiquement ?

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

Copier après la connexion

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.

Exemple

Dans l'exemple ci-dessous, nous utilisons la balise Comment puis-je faire correspondre la largeur du texte à la largeur d'une image/titre redimensionné dynamiquement ? 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>

Copier après la connexion

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.

Exemple

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>

Copier après la connexion

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.

Exemple

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>

Copier après la connexion

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!