img - imagen html

Limite el texto al ancho de la imagen de hermanos/ancho automático en CSS

Question

Básicamente estoy tratando de crear una versión del elemento "figura" (próximamente en HTML5), por lo que tengo una imagen con una breve descripción debajo.

Sin embargo, quiero limitar el ancho de todo este elemento al de la imagen, por lo que el texto no es más ancho que la imagen (se ajusta a varias líneas si es necesario).

HTML básico:

<div class="figure">
<img src="..." alt="..." width="..." height="..." /><br />
A description for the image
</div>

Estoy bien versado en CSS pero no puedo pensar en ninguna solución de CSS pura, sin agregar un style="width:100px" al div para que coincida con el ancho de la imagen.

Actualización : Después de buscar y pensar un poco, el mejor método parece ser utilizar un ancho en línea en el div. Mantendré el atributo de ancho en la imagen, en caso de que desee que el div sea un poco más ancho que la imagen (por ejemplo, para acomodar un título más largo).

Este enfoque también significa que podría tener dos imágenes una al lado de la otra con un título debajo. Si tengo un conjunto de imágenes del mismo tamaño, por supuesto puedo agregar un estilo adicional a cada div .

¡Gracias a todos los que contestaron!

Answer 1

Esto también podría lograrse usando ''display: table-caption'' para el título, de la siguiente manera:

HTML

<div class="wrapper">
  <img src="image.jpg" />
  <div class="caption">My caption...</div>
</div>

Hoja de estilo

.wrapper {
  display: table;
}

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

Este bloque también puede flotar a la izquierda de la derecha de otro texto. He probado esto en IE8 +. Aquí hay un ejemplo de JSBin: http://jsbin.com/xiyevovelixu/1

Answer 2

Para configurar el ancho para que coincida con la imagen automáticamente, puede utilizar

.figure {
  display: table;
  width: 1px;
}

Esto hace que el div se comporte como una tabla (no se admite en Internet Explorer). O podrías usar una tabla en lugar del div. No creo que haya otra forma de configurar el ancho automáticamente.

Edición : la forma más sencilla es olvidarse del ancho automático y configurarlo a mano. Si es realmente necesario, puedes usar JavaScript o una tabla. En este caso, el uso de una tabla no es tan feo porque está abordando una limitación de la versión HTML. En el caso de las secuencias de comandos del lado del servidor, también puede establecer el ancho al generar la página.

Answer 3

Podría usar la solución de display:table para todos los demás navegadores y un Comportamiento de CSS para Internet Explorer.

Answer 4

Tuve el mismo problema y, después de leer this decidí usar un estilo en línea en el elemento circundante. Parece la mejor solución al usar una mesa para mí.

Answer 5

Hoja de estilo

div.figure img,
div.figure div.caption {
    width: 100%;
}
div.figure div {
    overflow: hidden;
    white-space: nowrap;
}

nota: para habilitar el ajuste simplemente elimine esa última línea css

HTML

<div class="figure" style="width:150px;">
    <img src="logo.png" alt="logo" />
    <div class="caption">A description for the image</div>
</div>

Lo he comprobado en Chrome, Firefox e IE7 y se ve bien en los tres. Me doy cuenta de que esto tiene el ancho en el div y no el img, pero al menos solo necesitas establecer el ancho en un solo lugar. Aparte de usar expresiones css (solo IE) no puedo ver una forma de configurar el ancho de divs exterior al ancho del primer elemento secundario.