圖片填充div的CSS方法

在Web開發(fā)中，我們經常需要將圖片填充到div中，這時可以通過CSS來實現(xiàn)，下面介紹幾種CSS圖片填充div的方法。

1、使用background-image屬性

可以通過設置div的background-image屬性來填充圖片，

div {
  background-image: url('image.jpg');
  background-size: cover; /* 圖片填充整個div */
}

2、使用img標簽

在div中嵌套img標簽，設置img的src屬性為圖片路徑，

<div>
  <img src='image.jpg' style='width: 100%; height: auto;'>
</div>

3、使用object-fit屬性

可以通過設置div的object-fit屬性來控制圖片在div中的填充方式，

div {
  width: 300px;
  height: 200px;
  object-fit: cover; /* 圖片填充整個div */
}

需要注意的是，object-fit屬性在IE瀏覽器中不被支持。

4、使用JavaScript動態(tài)設置圖片路徑

可以通過JavaScript動態(tài)設置圖片路徑，實現(xiàn)圖片填充div的效果，

var img = document.getElementById('image');
img.src = 'image.jpg'; /* 設置圖片路徑 */

在HTML中設置相應的id屬性：

<div id='div'>
  <img id='image'>
</div>

是幾種CSS圖片填充div的方法，可以根據(jù)實際需求選擇適合的方法。