在現今的網頁開發中，圖片的展示是其中占比較大的一部分。有時，我們需要對圖片進行大小的調整以適應不同的設備或場景，這時候 JavaScript 就能幫我們完成這些任務。 首先，我們需要獲取目標圖片的元素對象，代碼如下：

var img = document.getElementById("imgId");

其中 "imgId" 是你要操作的圖片元素的 ID 名稱，可以根據實際情況進行更改。 然后，我們需要獲取目標元素的寬度和高度（以像素為單位），代碼如下：

var width = img.clientWidth; // 圖片寬度
var height = img.clientHeight; // 圖片高度

這兩個屬性可以返回元素的當前寬度和高度，即使該元素的樣式表指定了其他的大小。 接下來，我們就可以通過設置這兩個屬性，來進行圖片的大小變換。例如，我們希望將一張圖片縮小到原大小的一半：

img.style.width = width / 2 + "px";
img.style.height = height / 2 + "px";

或者，我們需要將一張圖片的最大寬度設置為 600 像素：

var maxWidth = 600; 
if (width >maxWidth) {
img.style.width = maxWidth + "px";
img.style.height = height * (maxWidth / width) + "px";
}

最后，我們需要注意，在使用上述方法進行圖片大小變換時，如果我們希望圖片在進行縮放時保持寬高比例不變，需要進行相應的計算。可以使用下面的代碼來實現：

var ratio = width / height;
if (width >maxWidth) {
img.style.width = maxWidth + "px";
img.style.height = maxWidth / ratio + "px";
}

在網頁開發中，確保圖片大小的合適性和美觀性對于用戶體驗和頁面效果有著至關重要的作用。通過 JavaScript 進行圖片的大小變換，我們不僅能夠使圖片更適合展示，同時也能夠使頁面更加生動活潑。