Find Child Image Width And Apply It To Containing Parent Div Jquery

I have an and some

's inside a

. I want to get the width of the child img and apply it to the width of the parent div so that the paragraphs of tex

Solution 1:

This works perfectly. Note that you have to use $(window).load() instead of $(document).ready(), because $(document).ready() fires before images are actually loaded, and thus the images will have no width.

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

Edit: Note that this will base the width off of the first image in the div. Simply change the index ([0]) to base it off another image in the div.

Edit 2: Applied John's correction on the .width() function.

Solution 2:

This will find all the divs on the page and set their widths equal to their img child element's width.

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

Solution 3:

You don't need to use Javascript at all for this. If you put the image and the p into child divs, this can be done purely in CSS as in Chris's solution (here's the JSFiddle: http://jsfiddle.net/glee/qs8GJ/ to the following SO question: css - shrink a parent div to fit one child's width and constrain the width of the other child

The trick is to set the parent div to...

display: table-cell;

the image div to...

display: table-row;
width: 1px;

...and the div containing the paragraph text to

display: table-cell;
width: 1px;

Works like charm!

Share