将元素宽度设置为其中的图像

Question

我有一个显示图片的页面，以及一些关于它的元数据。图像和元数据应该在页面中居中。我希望包含元数据的div与图像一样宽。排序如下：

不幸的是，在提供页面之前，我无法可靠地确定图像的宽度。现在我在加载时使用了一个监听器：

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

这样可行，但是如果图像很大并且需要一段时间才能加载，那么该页面看起来很糟糕，直到它完成。所以我正在寻找：

1. 使用CSS表示容器应该与其中的图像一样宽的方法。
2. 一旦浏览器获得足够的信息以了解图像的宽度就会触发的事件（从我看到的情况来看，这很早就开始了）。

谢谢！

Answer 1

没有任何jquery，这很容易做到。只需将容器设置为display:inline-block，如下所示：

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

此 fiddle 中的示例（图片大小600px x400px）