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的意思就是将這個元素寬度設定為這個容器内部最大的不可斷行的元素的寬度(即最寬的單詞、圖檔或具有固定寬度的盒元素)。