css 图片自适应_每天一个CSS小技巧 - 内容元素的自适应

大家都知道如果不给一个元素设定一个具体的height，它就会自动适应其内容的高度。但是如果我们希望width也有类似的行为，我们该怎么做呢？

下面是我们实际的HTML：

Let’s assume we have some text here. Bacon ipsum dolor sit amet turkey veniam shankle, culpa short ribs kevin t-bone occaecat.

The great Sir Adam Catlace was named after Countess Ada Lovelace, the first programmer ever.

We also have some more text here. Et laborum venison nostrud, ut veniam sint kielbasa ullamco pancetta.

最初的实际效果如下：

如果我们为figure添加一道边框，在默认情况下，如下图所示：

我们会发现边框实际是跟着屏幕的宽度在变化的，但我们实际上想要的是让figure这个元素跟它所包含的图片一样宽，并且使图片水平居中于屏幕中心。

那么我们应该怎么解决呢？

---

方案1：float

我们的确的到了想要的宽度，但是网页的布局也混款了。

---

方案2：display: inline-block

我们得到了我们想要的宽度，但我们发现很难继续完成水平居中的任务，我们需要：

但我们发现这样很麻烦，我们首先对其父元素设置了text-align:center，然后又对其父元素的其他子元素又设置了text-align:left，就算是这样，图片的说明文字还是比图片宽，很难看。

---

最终方案：

这个min-content的意思就是将这个元素宽度设置为这个容器内部最大的不可断行的元素的宽度(即最宽的单词、图片或具有固定宽度的盒元素)。