js控制图片缩放 不失真 获取图片真实长和宽

在JavaScript中，实现图片的等比例缩放以保持不失真是一项常见的需求，特别是在网页设计和动态展示中。这里我们将深入探讨如何实现这一功能，并解决图片在切换时保持正确比例的问题。 我们要明白图片不失真的关键在于保持其原始的宽高比。在CSS中，我们可以通过设置`width`和`height`属性为`auto`，然后设置`max-width`和`max-height`来限制图片的最大尺寸，使其不会超出容器的边界，从而避免拉伸导致的失真。例如： ```html <img src="image.jpg" style="max-width: 100%; max-height: 100%; width: auto; height: auto;"> ``` 但在JavaScript中，我们需要手动计算图片的缩放比例。以下是一个基本的示例，用于获取图片的真实宽度和高度： ```javascript function getImageRealSize(img) { var imgObj = new Image(); imgObj.src = img.src; return { width: imgObj.naturalWidth, height: imgObj.naturalHeight }; } ``` 这个函数通过创建一个新的`Image`对象并设置其`src`属性，然后在图片加载完成后返回其真实尺寸。 对于多张图片的切换，我们需要确保每张图片都按照相同的比例缩放。这通常涉及到一个动态调整容器大小的过程。假设我们有一个图片列表和一个显示图片的容器： ```html <div id="container"> <img id="displayedImage" src="" alt="Display Image" style="display: none;"> </div> <ul id="imageList"> <li><img src="image1.jpg"></li> <li><img src="image2.jpg"></li> <!-- 更多图片... --> </ul> ``` 我们可以使用以下JavaScript代码来实现图片的切换： ```javascript document.getElementById('imageList').addEventListener('click', function(e) { if (e.target.tagName.toLowerCase() === 'img') { var targetImg = e.target; var container = document.getElementById('container'); var displayedImg = document.getElementById('displayedImage'); // 获取新图片的真实尺寸 var realSize = getImageRealSize(targetImg); // 计算缩放比例 var scale = Math.min(container.clientWidth / realSize.width, container.clientHeight / realSize.height); // 更新显示图片的样式 displayedImg.style.display = 'block'; displayedImg.src = targetImg.src; displayedImg.style.width = realSize.width * scale + 'px'; displayedImg.style.height = realSize.height * scale + 'px'; // 添加过渡效果（可选） displayedImg.style.transition = 'all 0.5s ease-in-out'; } }); ``` 这段代码监听图片列表的点击事件，当用户点击一张图片时，计算新图片与容器的缩放比例，然后更新显示图片的样式，使其按比例缩放。如果需要，还可以添加过渡效果来增强用户体验。 以上就是利用JavaScript实现图片等比例缩放、切换时不失真的基本方法。在实际应用中，你可能需要根据具体需求进行调整，比如处理图片加载状态、优化性能或者增加动画效果等。记住，关键在于计算合适的缩放比例，以及保持图片的原始宽高比不变。