JavaScript是前端開發中不可或缺的一部分，它可以讓我們的網頁變得更加動態和交互性。其中一項常見的應用就是對圖片的操作，這篇文章將介紹一種利用JavaScript實現圖片填滿的方法。 首先，我們來看一個場景：我們有一張圖片，但是它的寬度和高度都是不固定的，我們需要將它填滿一個固定的容器。最簡單的方法就是將圖片的寬度和高度都設置為100%。但是，這樣可能會出現圖片比例失真的問題，而且如果圖片比容器小，那么它就會被拉伸至填滿容器，這對于圖片的質量來說并不是最優的。因此，我們需要一個更好的方法來解決這個問題。 接下來，就來介紹一種利用JavaScript實現圖片填滿固定容器的方法。首先，我們需要獲取到容器和圖片的寬度和高度。這可以通過JavaScript的DOM API來實現，代碼如下： ```html``` 在這段代碼中，我們首先通過getElementById()方法獲取到容器和圖片元素，然后分別獲取到它們的寬度和高度。注意，獲取圖片的寬度和高度需要等待圖片加載完成后才能獲取到，否則會獲取到0值。因此，最好在頁面加載完成后再執行這段代碼。 接下來，我們需要根據容器和圖片的寬高比例來計算出一個合適的縮放比例。具體來說，如果容器的寬高比例大于圖片的寬高比例，則以容器的高度為基準進行縮放，否則以容器的寬度為基準進行縮放。代碼如下： ```html``` 在這段代碼中，我們首先計算出容器和圖片的寬高比例，然后根據不同的比例來計算一個合適的縮放比例。如果容器的寬高比例大于圖片的寬高比例，我們以容器的高度為基準進行縮放，否則以容器的寬度為基準進行縮放。最終得到的scale變量就是圖片需要縮放的比例。 最后，我們需要將圖片元素的寬和高分別乘以縮放比例，就可以將圖片填滿容器了。代碼如下： ```html``` 在這段代碼中，我們將圖片的寬和高都乘以縮放比例，然后設置為元素的樣式。最終效果就是圖片會被縮放到恰好填滿容器。 總結一下，通過上述的方法，我們可以利用JavaScript實現圖片填滿固定容器的效果。代碼比較簡單，而且可擴展性比較好，可以應對各種不同的圖片和容器大小。在實際開發中，我們可以根據需要對這個方法進行優化和改進，實現更加出色的效果。