html - tamaño - Ancho del título de la imagen a igual que la imagen

mostrar imagen en html

Question

¿Cómo puedo hacer que el ancho de la leyenda de la imagen sea igual al de la imagen? Ahora tengo el siguiente código:

<div class="image">
    <img src="foo.jpg" alt="" />
    <div>This is the caption.</div>
</div>

He intentado muchas cosas (flotación, posicionamiento absoluto, etc.), pero si el título es largo, siempre hace que el div sea ancho en lugar de ir en muchas líneas. El problema es que no sé el ancho de la imagen (o la longitud del título). ¿Es la única forma de resolver este uso de tablas?

Answer 1

La única forma de realizar los subtítulos correctamente es encerrar la imagen y el subtítulo en una tabla construida a partir de elementos span con atributos de tabla, fila de tabla y tabla-celda.

Cualquier otro método (incluidas las etiquetas de figuras de HTML5) da desajustes de ancho o provoca saltos de línea no deseados.

Si su método debe funcionar en un navegador que no sea css3, entonces una tabla es probablemente la mejor opción.

Answer 2

La clave es tratar la imagen como que tiene un cierto ancho y cierta longitud. En el siguiente ejemplo, verifiqué y mi imagen tenía 200 px de ancho. Y luego tratar el título como un bloque en línea.

HTML:

<div style="width:200px;">
   <img src="anImage.png" alt="Image description"/>
   <div class="caption">This can be as long as you want.</div>
</div>

CSS:

.caption {
   display: inline-block;
}

También puede reemplazar el bloque en línea con el texto justificado a la izquierda, a la derecha o extendido sobre el ancho exacto de la imagen reemplazando el css anterior por uno de los siguientes:

.caption {
   /* text-align: left; */
   /* text-align: right; */
   text-align: justify;
}

Answer 3

Podría intentar configurar la display:inline-block envoltura div div display:inline-block

http://jsfiddle.net/steweb/98Xvr/

Si el título es largo, la única solución será establecer un ancho fijo, o establecer el ancho de div .image por js. Estoy tratando de pensar en una solución css pura, pero creo que es un desafío difícil :)

Answer 4

Por lo tanto, el problema es que no sabe qué ancho será el img, y el título para el img puede exceder el ancho del img, en cuyo caso desea restringir el ancho del título al ancho del img.

En mi caso, apliqué display:table en el elemento padre, y apliqué display:table-caption y caption-side:bottom en el elemento caption de la siguiente manera:

<div class="image" style="display:table;">
    <img src="foo.jpg" alt="" />
    <div style="display:table-caption;caption-side:bottom;">This is the caption.</div>
</div>

Answer 5

Puede aplicar display:table; y un ancho inicial arbitrario, por ejemplo. width:7px; al bloque padre como figure y todo funcionará como se espera!

Aquí hay una demostración en vivo: http://jsfiddle.net/blaker/8snwd/

La limitación de esta solución es que IE 7 y versiones anteriores no son compatibles con display:table; e IE 8 requiere que su doctype sea !DOCTYPE .

Fuentes:

• http://www.lifeathighroad.com/web-development/forcing-to-wraps-to-the-width-of-an-image-using-css-only/
• W3Schools (no se puede publicar el enlace debido al límite de 2 enlaces de para personas con menos de 10 representantes)

Answer 6

Si el problema es que el título es demasiado largo, siempre puede usar

div.image {
    width: 200px; /* the width you want */
    max-width: 200px; /* same as above */ 
}
div.image div {
    width: 100%;
}

Y el subtítulo se mantendrá estático. Además, el nombre de la etiqueta es img, no imagen.

O, si desea detectar el ancho de su imagen, puede usar jQuery:

$(document).ready(function() {
    var imgWidth = $(''.image img'').width();
    $(''.image div'').css({width: imgWidth});
});

De esa manera, obtienes el ancho de la imagen, luego le asignas el ancho del título.