JavaScript 如何实现图片的自动裁剪缩放功能？

在网页开发中，经常需要处理图片的显示和布局问题。有时候，我们希望在不改变图片比例的情况下，将图片缩放到指定的尺寸，并且裁剪出合适的部分显示在页面上。JavaScript 提供了一种方便的方式来实现这个功能。

具体代码示例：

HTML：

<div id="image-container">  <img id="image" src="path/to/image.jpg" alt="Image"></div>

CSS：

#image-container {  width: 300px;  height: 200px;  overflow: hidden;}#image {  max-width: 100%;  max-height: 100%;}

JavaScript：

function cropAndResizeImage(containerId, imagePath, targetWidth, targetHeight) {  var container = document.getElementById(containerId);  var image = document.createElement('img');  image.onload = function() {    var sourceWidth = this.width;    var sourceHeight = this.height;    var sourceRatio = sourceWidth / sourceHeight;    var targetRatio = targetWidth / targetHeight;    var scaleRatio;    if (sourceRatio > targetRatio) {      scaleRatio = targetHeight / sourceHeight;    } else {      scaleRatio = targetWidth / sourceWidth;    }    var scaledWidth = sourceWidth * scaleRatio;    var scaledHeight = sourceHeight * scaleRatio;    var offsetX = (scaledWidth - targetWidth) / 2;    var offsetY = (scaledHeight - targetHeight) / 2;    image.style.width = scaledWidth + 'px';    image.style.height = scaledHeight + 'px';    image.style.marginLeft = -offsetX + 'px';    image.style.marginTop = -offsetY + 'px';    image.style.visibility = 'visible';  };  image.src = imagePath;  image.style.visibility = 'hidden';  container.appendChild(image);}// 使用示例cropAndResizeImage('image-container', 'path/to/image.jpg', 300, 200);

在处理函数中，根据原始图片的比例和目标尺寸的比例，计算出应该缩放的比例，并将缩放后的图片大小和偏移量设置为元素样式。最后，将图片添加到指定的容器中。

在 CSS 部分，我们将容器设置为指定大小，并隐藏超出范围的部分。图片样式设置了最大宽度和最大高度为 100%，保证了图片不会超出容器的大小。

通过调用 cropAndResizeImage 函数，将图片自动裁剪缩放并显示在指定容器中。