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

Question

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

P粉008829791 · Answer

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.

P粉030479054 · Answer

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%;
}


    
  
    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.