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

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;}

此小提琴中的示例（图像尺寸600px x400px）