本文目錄導(dǎo)讀：

1. 使用CSS的object-fit屬性
2. 使用HTML的img標(biāo)簽

CSS圖片不平鋪的方法

在網(wǎng)頁(yè)設(shè)計(jì)中，圖片平鋪是一種常見(jiàn)的處理方式，但有時(shí)候我們可能希望圖片不平鋪，以達(dá)到更好的視覺(jué)效果，如何使用CSS來(lái)實(shí)現(xiàn)圖片不平鋪呢？

使用CSS的object-fit屬性

CSS的object-fit屬性可以指定圖片在容器中的填充方式，quot;cover"和"contain"兩個(gè)值可以實(shí)現(xiàn)圖片不平鋪的效果。"cover"表示圖片將完全覆蓋容器，但可能會(huì)超出容器的寬度或高度；"contain"則表示圖片將完全適應(yīng)容器的大小，但可能會(huì)在圖片中間留下空白區(qū)域。

二、使用CSS的background-size屬性

CSS的background-size屬性也可以實(shí)現(xiàn)圖片不平鋪的效果，該屬性可以指定背景圖片的大小，如果圖片大小超過(guò)容器的大小，那么圖片就不會(huì)平鋪，該屬性還支持使用百分比來(lái)指定圖片的大小，這樣可以根據(jù)容器的大小自動(dòng)調(diào)整圖片的大小。

使用HTML的img標(biāo)簽

在HTML中，img標(biāo)簽用于插入圖片，如果圖片的大小超過(guò)其容器的大小，那么圖片就不會(huì)平鋪，可以通過(guò)設(shè)置img標(biāo)簽的寬度和高度來(lái)實(shí)現(xiàn)圖片不平鋪的效果。

CSS提供了多種方法來(lái)實(shí)現(xiàn)圖片不平鋪的效果，我們可以根據(jù)具體的需求選擇適合的方法。