CSS里如何調(diào)圖片長(zhǎng)寬 在前端頁(yè)面設(shè)計(jì)中，圖片通常占據(jù)了大部分視覺(jué)空間。站在用戶角度，我們需要保證圖片不失真、清晰，不過(guò)也需要適應(yīng)不同屏幕大小。因此，在CSS樣式表中調(diào)整圖片大小是必不可少的。下面將介紹如何使用CSS控制圖片寬高。 使用CSS width屬性控制圖片寬度 要控制圖片的寬度，可以使用CSS中的width屬性。width屬性可以指定元素的寬度，語(yǔ)法如下： ``` img{ width: 100px; /* 圖片寬度為100像素 */ } ``` 如果想要使圖片寬度自適應(yīng)容器大小，可以將width屬性設(shè)為100%： ``` img{ width: 100%; /* 圖片寬度適應(yīng)容器寬度 */ } ``` 使用CSS height屬性控制圖片高度 與width屬性類似，使用height屬性可指定圖片的高度。下面是height的使用方法： ``` img{ height: 100px; /* 圖片高度為100像素 */ } ``` 也可以將height屬性設(shè)為100%，使圖片高度自適應(yīng)容器高度： ``` img{ height: 100%; /* 圖片高度適應(yīng)容器高度 */ } ``` 一起使用width和height屬性控制圖片大小 當(dāng)同時(shí)需要調(diào)整圖片寬高時(shí)，可以使用width和height屬性： ``` img{ width: 200px; height: 100px; /* 圖片寬度200像素，高度100像素 */ } ``` 需要注意的是，如果設(shè)置了width和height同時(shí)縮小圖片，可能會(huì)出現(xiàn)圖片失真變形、清晰度降低等問(wèn)題。 使用CSS background-size屬性調(diào)整背景圖片大小 除了使用img標(biāo)簽顯示圖片外，還可以使用background-image將圖片作為元素的背景。這時(shí)候，使用background-size屬性可以設(shè)置背景圖片的寬高。 ``` div{ background-image: url(image.png); background-size: cover; /* 背景圖片寬高根據(jù)容器調(diào)整 */ } ``` 上面的代碼中，background-size設(shè)置為cover，表示背景圖片會(huì)縮放以覆蓋整個(gè)元素。還可以設(shè)為contain，表示縮放后能夠全部包含背景圖片，不留空白。 到這里，關(guān)于如何使用CSS調(diào)整圖片寬高的介紹就結(jié)束了。使用這些屬性，可以靈活控制圖片大小，從而適應(yīng)不同設(shè)備和不同屏幕尺寸的需求。