css - poner - ¿Cómo puedo hacer que el ancho de mi<figcaption> coincida con el ancho del<img> dentro de su etiqueta<figure>?

footer image html

Question

Oye, tengo este código:

<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 no uso ningún CSS, figcaption expandirá el ancho del elemento de figura más allá de 200px. ¿Cómo puedo prevenir esto?

Sé que puedo forzar el texto dentro de la figura para que se ajuste al especificar el ancho del elemento de figura ( <figure style="width:200px;"> ) pero realmente no quiero usar esto para todas y cada una de las imágenes.

Answer 1

Otra solución: usar ancho intrínseco

Solo establece el width: min-content; en el elemento figure

DEMO (Excepto 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: el soporte del navegador está bien , excepto para IE, sin embargo , están considerando implementar esto

Answer 2

Agregar este Código a <figure> y <figcaption> CSS-Attributes me ayudó con el mismo problema. Además, conserva los responsivenes de tus imágenes y subtítulos.

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

1. Añadiendo display: table; prepara el escenario.

2. Añadiendo display: table-caption; solo colocó el título en la parte superior de la imagen, la propiedad del caption-side especifica la ubicación del título de la tabla en la bottom , la bottom top está predeterminada.

Answer 3

Desafortunadamente, establecer el ancho de la figura en lugar de usar max-width: 100% significa que no se reducirá en dispositivos estrechos (móviles). Es decir, las imágenes no serán responsive . Recurrí a insertar <br /> para separar los subtítulos largos, pero no me gustó. Pero esta característica de CSS oscura parece funcionar para mí:

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

Esto mantiene la imagen receptiva, aunque el título no lo sea. Puede elegir su propio ancho de título. También agregué margin: auto; text-align: center; margin: auto; text-align: center; para centrar la leyenda en un dispositivo móvil.

Answer 4

Esto colocará la figcaption junto a la img :

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

Aquí hay un ejemplo . Sin embargo, no estoy del todo claro qué es lo que está tratando de lograr; usted dice en la pregunta que desea que la figure mantenga en un ancho de 200px, pero luego comenta que quiere que la figcaption aparezca a la derecha, lo que haría que figure más ancha. Si todo lo que quieres es que la figcaption se limite al ancho de la imagen, esto debería funcionar :

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 5

Esto me molestó mucho, porque quería encontrar una respuesta para acomodar una actualización a HTML5 que reemplazaría con éxito mi configuración original de visualización de imágenes y títulos: una tabla con dos filas (o una si no hay un título disponible).

Es posible que mi solución no funcione para todos, pero hasta ahora, parece funcionar bien en los principales navegadores (O, FF, IE, S, C), además de responder en dispositivos móviles:

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

La idea aquí es que la figure es empujada a la existencia por el ancho del img y por lo tanto no necesita ningún tipo de dirección.

figure img {
display: block;
}

Esto se utiliza para eliminar la brecha inútil y antiestética entre la parte inferior de img y la parte inferior de la figure .

figcaption {
text-align: left;
}

Ahora que la figura ha sido empujada para abrirla lo suficiente como para permitir que figcaption , el texto de figcaption solo tiene esa cantidad limitada de espacio para existir. text-align no es necesario para que esta solución funcione.

Esta solución funciona tan bien como la display: table-caption , pero mantiene la figcaption contenida en cualquier valor de borde o fondo que pueda ser necesario establecer.