trouve la largeur de l’image enfant et l’applique au parent div j jquery

J’ai un et quelques

dans un

Je veux obtenir la largeur de l’enfant img et l’appliquer à la largeur de la div parent afin que les paragraphes de texte soient renvoyés à la même largeur que l’img.

Je veux pouvoir faire ceci à plusieurs itérations sur la même page.

Contexte: Je développe un thème wordPress utilisant le plugin maonry jquery ( http://desandro.com/resources/jquery-masonry ). Mon thème a quelque chose en commun avec le thème Gridalicious ( http://suprb.com/apps/gridalicious ), mais la largeur et la taille de la publication seront dictées par la largeur de l’image et ne seront pas uniformes.

Mon html / css est impeccable mais mon jQuery / javascript est assez fragile – mais si je peux obtenir quelques indications, je devrais être capable de travailler avec.

Toute aide vraiment appréciée.

Cela fonctionne parfaitement. Notez que vous devez utiliser $ (window) .load () au lieu de $ (document) .ready (), car $ (document) .ready () se déclenche avant que les images ne soient réellement chargées. Par conséquent, les images n’auront pas de largeur.

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

Edit: Notez que ceci basera la largeur de la première image du div. Modifiez simplement l’index ([0]) pour le baser sur une autre image du div.

Edit 2: Applique la correction de John sur la fonction .width ().

Cela permettra de trouver tous les divs sur la page et de définir leurs largeurs égales à la largeur de leur élément enfant img.

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

Vous n’avez pas du tout besoin d’utiliser Javascript pour cela. Si vous mettez l’image et le p dans les divs enfants, vous pouvez le faire uniquement en CSS, comme dans la solution de Chris (voici le JSFiddle: http://jsfiddle.net/glee/qs8GJ/) à la question suivante de SO: css – shrink a parent div pour adapter la largeur d’un enfant et contraindre la largeur de l’autre enfant

L’astuce consiste à définir la div parent sur …

 display: table-cell;

l’image div à …

 display: table-row; width: 1px;

… et la div contenant le texte du paragraphe à

 display: table-cell; width: 1px;

Fonctionne comme un charme!