encontrar ancho de la imagen infantil y aplicarla a los padres que contiene div jQuery

Question

Tengo una <img> y algunos <p> hay dentro de un <div>.

Quiero conseguir el ancho de la img niño y aplicarlo a la anchura del div de los padres para que los párrafos de texto se ajustará a la misma anchura que la img.

Quiero ser capaz de hacer esto a múltiples iteraciones en la misma página.

Antecedentes: Estoy desarrollando un tema de WordPress que utiliza la mampostería plugin de jQuery ( http://desandro.com/resources/jquery -Albañilería ). Mi tema tiene algo en común con el tema Gridalicious ( http://suprb.com/apps/gridalicious ) pero las anchuras de correos y tamaños serán dictadas por el ancho de la imagen y no serán uniformes.

Mi HTML / CSS es impecable pero mi jQuery / javascript es bastante inestable -., Pero si puedo conseguir algunos consejos que debe ser capaz de trabajar con ella

Cualquier ayuda apreciado verdad.

Answer 1

Esto funciona perfectamente. Tenga en cuenta que usted tiene que utilizar $ (ventana) .load () en lugar de $ (document) ready (), ya que $ (document) incendios ready () antes de que se carguen las imágenes, y por lo tanto las imágenes no tendrán ancho.

$(window).load(function() {
    $('div').each(function() {
        $(this).width($(this).find('img').width());
    });
});

Editar Nota que esto va a basar el ancho fuera de la primero imagen en el div. Simplemente cambie el índice ([0]) que se base fuera de otra imagen en el div.

Editar. 2: corrección de John Aplicada sobre la función .width ()

Answer 2

Esto encontrará todos los divs en la página y establecer sus anchos igual a la anchura de su img del elemento secundario.

 $('.divselector').attr('width', $(this).find('img').attr('width'))

Answer 3

No es necesario utilizar Javascript en absoluto para esto. Si pones la imagen y el p en divs niño, esto se puede hacer simplemente en CSS como en la solución de Chris (aquí está la jsFiddle: http://jsfiddle.net/glee/qs8GJ/ a la siguiente pregunta SO: css - reducir un div padre para adaptarse a la anchura de un niño y limitar el ancho del otro niño

El truco es fijar el padre div a ...

display: table-cell;

la imagen div a ...

display: table-row;
width: 1px;

... y el div que contiene el texto del párrafo a

display: table-cell;
width: 1px;

Obras como encanto!