css怎麼設定圖片的寬高

圖片在網頁設計中扮演了重要的角色，適當設定圖片的寬高可以使網頁更美觀、結構更合理。那麼，如何透過CSS設定圖片的寬高呢？

首先，HTML程式碼中插入圖片時需要注意以下幾點：

1. 使用alt屬性：alt屬性用於為插入的圖片新增文字說明。如果圖片無法載入，alt屬性也可以幫助使用者了解圖片的內容。
2. 指定圖片的寬高：在設定圖片寬高時，可以使用HTML標籤的width和height屬性。但這種方式不靈活，無法實現不同尺寸設備的響應式設計。

因此，使用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中文網其他相關文章！