encontrar ancho de la imagen infantil y aplicarla a los padres que contiene div jQuery
-
02-10-2019 - |
Pregunta
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.
Solución
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 ()
Otros consejos
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'))
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!