大家都知道如果不給一個元素設(shè)定一個具體的height，它就會自動適應(yīng)其內(nèi)容的高度。但是如果我們希望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.

最初的實際效果如下：

如果我們?yōu)閒igure添加一道邊框，在默認情況下，如下圖所示：

我們會發(fā)現(xiàn)邊框?qū)嶋H是跟著屏幕的寬度在變化的，但我們實際上想要的是讓figure這個元素跟它所包含的圖片一樣寬，并且使圖片水平居中于屏幕中心。

那么我們應(yīng)該怎么解決呢？

---

方案1：float

我們的確的到了想要的寬度，但是網(wǎng)頁的布局也混款了。

---

方案2：display: inline-block

我們得到了我們想要的寬度，但我們發(fā)現(xiàn)很難繼續(xù)完成水平居中的任務(wù)，我們需要：

但我們發(fā)現(xiàn)這樣很麻煩，我們首先對其父元素設(shè)置了text-align:center，然后又對其父元素的其他子元素又設(shè)置了text-align:left，就算是這樣，圖片的說明文字還是比圖片寬，很難看。

---

最終方案：

這個min-content的意思就是將這個元素寬度設(shè)置為這個容器內(nèi)部最大的不可斷行的元素的寬度(即最寬的單詞、圖片或具有固定寬度的盒元素)。

總結(jié)

以上是生活随笔為你收集整理的css background-image 高度自适应_每天一个CSS小技巧 - 内容元素的自适应的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。