Faire correspondre la largeur du texte aux images/titres de taille dynamique : un guide étape par étape

Question

Voir ce code stylo : https://codepen.io/allen-houng/pen/XGMjMr?editors=1100#0

    <div>
      <img src="https://res.cloudinary.com/djcpf0lmv/image/upload/v1549372650/Templates/yoga.jpg" data-radium="true" style=";">
      <div class="description">
        Fusce consequat. Nulla nisl. Nunc nisl. Duis bibendum, felis sed interdum   venenatis, turpis enim blandit mi, in porttitor pede justo eu massa. Donec dapibus. Duis at velit eu est congue elementum.
      </div>
    </div>

J'ai un div parent et deux div enfants - une image et une description. Je redimensionne l'image en fonction de la hauteur de la fenêtre, ce qui signifie que la largeur sera dynamique et réactive. Comment puis-je redimensionner le div frère correspondant .description pour qu'il corresponde à la largeur de l'image sans JavaScript ?

En d’autres termes, comment transformer :

Entrez ceci :

Answer 1

Vous pouvez simplement définir la largeur de l'image à 100%. Ajoutez simplement "width:100%;" dans votre balise de style img pour tester comme ceci :

  
  

    Fusce consequat. Nulla nisl. Nunc nisl. Duis bibendum, felis sed interdum venenatis, turpis enim blandit mi, in porttitor pede justo eu massa. Donec dapibus. Duis at velit eu est congue elementum.
  

Ou mettez-le dans une classe :

.img-full {
  display: block;
  width: 100%;
}

  
  

    Fusce consequat. Nulla nisl. Nunc nisl. Duis bibendum, felis sed interdum venenatis, turpis enim blandit mi, in porttitor pede justo eu massa. Donec dapibus. Duis at velit eu est congue elementum.
  

"display: block" garantit simplement que votre image est toujours dans son propre bloc, quelle que soit sa largeur. Autrement dit, votre texte n'apparaîtra pas à côté, seulement en dessous ou au-dessus.

Answer 2

Réglez le conteneur sur inline-block （或任何收缩配置，如 table、inline-grid、inline-flex、float、absolute 等），然后强制文本宽度为 phpcnc phpcn0 所以容器的宽度是由图像定义（文本不影响宽度），然后使用 min-width 再次强制宽度为 100%

.parent {
  background: pink;
  display:inline-block;
}

img {
  display: block;
  max-height: 70vh;
}

.description {
  width:0;
  min-width:100%;
}

    
  

    Fusce consequat. Nulla nisl. Nunc nisl. Duis bibendum, felis sed interdum   venenatis, turpis enim blandit mi, in porttitor pede justo eu massa. Donec dapibus. Duis at velit eu est congue elementum.