圖片在網頁設計中扮演了重要的角色，適當設定圖片的寬高可以使網頁更美觀、結構更合理。那麼，如何透過CSS設定圖片的寬高呢？
首先，HTML程式碼中插入圖片時需要注意以下幾點：
因此，使用CSS的background-image屬性和background-size屬性來設定圖片的寬高是更好的選擇。以下是一些實用的CSS技巧：
① 設定固定寬高
在CSS中使用width和height屬性可以設定圖片的固定寬高，如下所示：
.img{
width: 300px; /*设置图片宽*/
height: 200px; /*设置图片高*/
}當然，也可以用簡寫方式來設定：
.img{
width: 300px; height: 200px; /*用“；”隔开即可*/
}② 根據容器自適應寬高
有時候，我們需要實現圖片隨著所在容器大小的變化而自適應寬高。這時可以使用CSS中的background-size屬性，設定其值為「contain」或「cover」。
「contain」表示圖片完整顯示，但可能不夠寬或不夠高；
「cover」表示圖片鋪滿容器，但我們無法保證完整顯示圖片。
如下：
.img{
background-image: url(./img/bg.jpg); /*设置背景图片地址*/
background-size: contain; /*或者：background-size: cover;*/
}③ 等比縮放圖片
為了確保圖片的比例不變，我們可以設定一個值為百分比的「padding-top」屬性。它會根據父容器的寬度來決定圖片的高度，從而實現等比縮放。
.img{
background-image: url(./img/bg.jpg); /*设置背景图片地址*/
padding-top: 50%; /*比例数值等于图片的高/宽*100% */
background-size: cover; /*铺满背景容器*/
}以上是三種常見的CSS圖片寬高設定方法。透過靈活運用，我們可以輕鬆實現網頁設計中的圖片展示優化，提升使用者體驗。
以上是css怎麼設定圖片的寬高的詳細內容。更多資訊請關注PHP中文網其他相關文章！
