25 votos

Cómo puedo hacer que el ancho de mi <figcaption> que coincida con el ancho del <img> interior de su <figure> etiqueta?

Decir, 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 yo no utilizo CSS el figcaption ampliará el ancho de la figura elemento más allá de 200px. ¿Cómo puedo evitar esto?

Sé que puedo forzar el texto dentro de la figcaption para envolver especificando el ancho de la figura del elemento (<figure style="width:200px;">) pero la verdad es que no quiero usar esto para cada imagen.

21voto

robertc Puntos 35382

Este lugar de la figcaption a un lado de la img:

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

He aquí un ejemplo. Sin embargo no estoy del todo claro lo que estamos tratando de lograr - usted dice en la pregunta que desea que el figure a permanecer en el 200px de ancho, pero luego de comentar que desea que el figcaption a aparecer a la derecha, lo que haría que el figure más amplio. Si todo lo que usted quiere es que el figcaption restringido a la anchura 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;
}

13voto

Marco Rohner Puntos 51

Agregar este Código a <figure> y <figcaption> CSS-Atributos me ayudó con el mismo problema. Además, conserva la responsivenes de sus imágenes y pies de foto.

figure { display: table; }


figcaption { display: table-caption; caption-side: bottom ; }
  1. Añadiendo display: table; establece el escenario.

  2. Añadiendo display: table-caption; solo coloca el título en la parte superior de la imagen, El caption-side propiedad especifica la colocación de el texto de la tabla en la bottom, top es el valor predeterminado.

1voto

Michael McGinnis Puntos 337

Desafortunadamente, la configuración de la anchura de la figura en vez de usar max-width: 100% significa que no se encoge en el estrecho (móvil) de los dispositivos. Es decir, las imágenes no se responden. He recurrido a la inserción de <br /> a romper largo de los subtítulos, pero no me gusta. Pero este oscuro CSS característica parece que funciona para mí:

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

Esto mantiene la imagen sensible, aunque el título no lo es. Usted puede escoger su propio título de ancho. También he añadido margin: auto; text-align: center; para centrar el título en un dispositivo móvil.

1voto

Rich Wertz Puntos 1

Este fue el que realmente me molesta, porque yo quería encontrar una respuesta para dar cabida a una actualización a HTML5 que consiga cambiar mi configuración original de mostrar las imágenes y los títulos - una tabla con dos filas (o uno si no hay título estaba disponible).

Mi solución podría no funcionar para todos, pero por ahora parece que va bien en los principales navegadores (O, FF, IE, S, C), así como ser sensible en dispositivos móviles:

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

La idea aquí es que figure es empujado a la existencia por el ancho de la img , de modo que no necesitan ningún tipo de dirección.

figure img {
display: block;
}

Esto se utiliza para deshacernos de los inútiles, feos espacio entre la parte inferior de la img y la parte inferior de la figure.

figcaption {
text-align: left;
}

Ahora esa cifra se ha abierto lo suficientemente anchos como para permitir img , figcaption texto sólo tiene que cantidad limitada de espacio en el que existen. text-align no es necesaria para que esta solución funcione.

Esta solución funciona tan bien como display: table-caption, pero mantiene figcaption contenida en cualquier frontera o el valor de fondo que puede ser necesario ajustar.

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X