难题

我们希望文字的最大宽度能和图片一样宽，而且 div.wrapper 能水平居中。

如何让 div.wrapper 的宽度由它内部的图片来决定，而不是由它的父元素来决定呢？

当开发者走投无路时，就只能对 div.wrapper 应用一个固定的 width 或 max-width，然后对 div.wrapper > img 应用 max-width: 100%。可是这个方法无法充分利用有效空间；对于过小的图片来说，布局效果也很突兀。此外，响应式也无从谈起。

解决方案

CSS3 为 width 和 height 属性定义了一些新的关键字，其中最有用的应该就是 min-content 了。这个关键字将解析为这个容器内部最大的不可断行元素的宽度（即最宽的单词、图片或具有固定宽度的盒元素）。