Comment puis-je faire correspondre la largeur du texte à la largeur d'une image/titre de taille dynamique ?

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 :

<div>
  <img src="https://res.cloudinary.com/djcpf0lmv/image/upload/v1549372650/Templates/yoga.jpg" data-radium="true" style="width: 100%;">
  <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>

Ou mettez-le dans une classe :

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

<div>
  <img src="https://res.cloudinary.com/djcpf0lmv/image/upload/v1549372650/Templates/yoga.jpg" data-radium="true" class="img-full">
  <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>

"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

Fabriquer des contenants inline-block（或任何收缩到适合的配置，如table、inline-grid、inline -flex、float、absolute 等）然后强制文本宽度为 0，从而定义容器的宽度通过图像（文本不影响宽度），然后使用 min-width

再次强制宽度为 100%

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

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

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

<div class="parent">
    <img src="https://picsum.photos/id/1004/900/600">
  <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>