javascript - Set element width to image inside it -

i have page displays image, along metadata it. image , metadata should centered in page. i'd div containing metadata wide image. sorta so:

mockup

unfortunately, it's not possible me reliably determine image's width before serving page. right i'm using listener on load:

$('.image-container img').one('load', function() {     $('.image-container, .image-container *').css('max-width', $(this).width()); });

this works, if image large , takes while load, page looks crappy until finishes. i'm looking either:

a way use css express container should wide image inside it.
an event fires browser gets enough information know image's width (which pretty on, can see).

thanks!

this quite easy without jquery. set container display:inline-block this:

div {display:inline-block; margin:0; padding:0;}

example in fiddle (image size 600px x400px)

Print F