Comment faire en sorte que la largeur de ma <figcaption> corresponde à la largeur de la <img>à l'intérieur de sa balise <figure> ?

Question

Dis, j'ai ce code :

<figure>
 <img src="bunnyrabbit.jpg" width="200" height="150" alt="An image of a bunny rabbit." />
 <figcaption>Bunny rabits are cuddly and fluffy creatures with big ears. They eat carrots.</figcaption>
</figure>

Si je n'utilise aucune feuille de style CSS, la figcaption élargira la largeur de l'élément figure au-delà de 200px. Comment puis-je éviter cela ?

Je sais que je peux forcer le texte à l'intérieur de la légende de la figure à être enveloppé en spécifiant la largeur de l'élément de la figure ( <figure style="width:200px;"> ) mais je n'ai pas vraiment envie de l'utiliser pour chaque image.

Answer 1

Ajout de ce code à <figure> y <figcaption> CSS-Attributes m'a aidé à résoudre le même problème. En outre, il préserve la réactivité de vos images et de vos légendes.

figure { display: table; }

figcaption { display: table-caption; caption-side: bottom ; }

1. Ajout de display: table; prépare le terrain.

2. Ajout de display: table-caption; a placé seul la légende sur le dessus de l'image, le caption-side spécifie le placement des la légende du tableau à l'emplacement bottom , top est par défaut.

Answer 2

Cela placera le figcaption côte à côte avec le img :

figure {
    display: table;
}
img, figcaption {
    display: table-cell;
    vertical-align: bottom;
}
figcaption {
    padding-left: 4px;
}

Voici un exemple . Cependant, je ne suis pas tout à fait sûr de ce que vous essayez d'obtenir - vous dites dans la question que vous voulez que le système de gestion de l'information de l'entreprise soit mis à jour. figure pour rester à une largeur de 200px, mais ensuite vous commentez que vous voulez que la figcaption d'apparaître à droite, ce qui rendrait la figure plus large. Si tout ce que vous voulez, c'est que le figcaption doit être limitée à la largeur de l'image, cela devrait fonctionner :

figure {
    display: table;
    width: 1px; /* This can be any width, so long as it's narrower than any image */
}
img, figcaption {
    display: table-row;
}

Answer 3

Une autre solution : Utilisez Largeur intrinsèque

Il suffit de mettre width: min-content; sur le figure élément

DEMO (Sauf pour IE)

figure {
  width: -webkit-min-content;
  width: -moz-min-content;
  width: min-content;
}

<figure>
  <img src=" http://placehold.it/200x150" width="200" height="150" alt="An image of a bunny rabbit." />
  <figcaption>Bunny rabits are cuddly and fluffy creatures with big ears. They eat carrots.</figcaption>
</figure>

NB : La prise en charge des navigateurs est bonne sauf pour IE, cependant ils envisagent de mettre en œuvre cette

Answer 4

Malheureusement, le fait de définir la largeur de la figure au lieu d'utiliser l'option max-width: 100% signifie qu'il ne rétrécira pas sur les appareils (mobiles) étroits. Autrement dit, les images ne seront pas Réactif . J'ai eu recours à l'insertion <br /> pour interrompre les longues légendes, mais je n'ai pas aimé ça. Mais cette obscure fonctionnalité CSS semble fonctionner pour moi :

figcaption { display: run-in; width: 150px }

L'image reste ainsi réactive, même si la légende ne l'est pas. Vous pouvez choisir la largeur de votre légende. J'ai également ajouté margin: auto; text-align: center; pour centrer la légende sur un appareil mobile.

Answer 5

Cela m'ennuyait vraiment, car je voulais trouver une réponse à une mise à niveau vers HTML5 qui remplacerait avec succès ma configuration initiale d'affichage des images et des légendes - un tableau à deux rangées (ou une seule si aucune légende n'est disponible).

Ma solution ne conviendra peut-être pas à tout le monde, mais jusqu'à présent, elle semble fonctionner parfaitement dans les principaux navigateurs (O, FF, IE, S, C) et être réactive sur les appareils mobiles :

figure {
border: 0px solid #000;
display: table;
width: 0;
}

L'idée ici est que figure est poussé à l'existence par la largeur de la img et n'a donc pas besoin de direction.

figure img {
display: block;
}

Cela permet de se débarrasser de l'espace inutile et inesthétique entre le bas de l'épaule et le haut de l'épaule. img et le bas de figure .

figcaption {
text-align: left;
}

Maintenant, cette figure a été poussée juste assez loin pour permettre à img dans, figcaption Le texte n'a que cet espace limité pour exister. text-align n'est pas nécessaire pour que cette solution fonctionne.

Cette solution fonctionne aussi bien que display: table-caption mais garde figcaption contenu dans toute valeur de bordure ou d'arrière-plan qui pourrait devoir être définie.