My webpage features an image along with some accompanying metadata that I want to be centered on the page. I want the div holding the metadata to be the same width as the image. Here's an example:
Unfortunately, I am unable to determine the image's width before the page loads. Currently, I am using a load listener like this:
$('.image-container img').one('load', function() {
$('.image-container, .image-container *').css('max-width', $(this).width());
});
While this method works, the page looks unattractive while a large image is loading. I am seeking either:
- A CSS solution to ensure the container matches the image width.
- An event that fires as soon as the browser knows the image's width, which happens early in the loading process.
Thank you!