国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

communauté

Apprendre

Bibliothèque d'outils

Outils d'IA

Loisirs

Fran?ais

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

P粉741678385 2024-04-06 10:04:43

912

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?:

P粉741678385

répondre à tous(2)

P粉0088297912024-04-07 09:39:14 2 plancher

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.

Comme +0

Ajouter une réponse

P粉0304790542024-04-07 09:10:01 1 plancher

Fabriquer des contenants inline-block（或任何收縮到適合的配置，如table、inline-grid、inline -flex、float、absolute 等）然后強(qiáng)制文本寬度為 0，從而定義容器的寬度通過(guò)圖像（文本不影響寬度），然后使用 min-width

再次強(qiáng)制寬度為 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>

Comme +0

Ajouter une réponse