JS获取图片实际宽高及根据图片大小进行自适应

在网页开发中，图片的显示效果常常需要与页面布局紧密结合，这就涉及到图片的实际宽高以及如何根据图片大小进行自适应。本文将详细讲解如何使用JavaScript获取图片的实际宽高，并实现根据图片大小进行自适应的解决方案。 我们需要理解为什么不能直接通过CSS来获取图片的实际宽高。通常，图片在加载时其尺寸信息并未立即可用，因此在DOM加载完成时，我们可能还无法获取到图片的真实宽度和高度。而JavaScript的`onload`事件则可以在图片完全加载后触发，这时我们可以安全地获取图片的宽高。 以下是一个简单的例子，展示了如何使用JavaScript获取图片实际宽高： ```html <img src="http://xxx.jpg" id="imgs" onload="adapt();"/> ``` 在这个例子中，`adapt`函数会在图片加载完成后被调用。我们可以通过以下方式获取图片的实际宽高： ```javascript function adapt() { var img = new Image(); img.src = $('#imgs').attr("src"); var imgWidth = img.width; // 图片实际宽度 var imgHeight = img.height; // 图片实际高度 } ``` 这里创建了一个新的`Image`对象，并设置了它的`src`属性为图片源。由于此时`img`对象已经与实际图片绑定，我们可以获取到`imgWidth`和`imgHeight`。 接下来，我们将讨论如何根据图片大小进行自适应。一种常见方法是设置CSS样式，确保图片的最大宽度不超过其容器宽度，同时保持纵横比不变： ```css <style type="text/css"> <!-- img { max-width: 100%; height: auto; } --> </style> ``` 这段CSS代码会让图片始终填充其容器，但宽度不会超过容器宽度，高度会按比例缩放。结合JavaScript，我们可以进一步优化这个过程。例如，如果图片宽度小于容器宽度，我们可以允许图片保持原尺寸： ```javascript function adapt() { var tableWidth = $("#imgTable").width(); // 表格宽度（假设这是图片容器） var img = new Image(); img.src = $('#imgs').attr("src"); var imgWidth = img.width; if (imgWidth < tableWidth) { $('#imgs').attr("style", "width: auto"); } else { $('#imgs').attr("style", "width: 100%"); } } ``` 在这个例子中，如果图片宽度小于表格宽度，我们将图片宽度设置为自动，这样图片就会保持其原始尺寸。否则，我们将其宽度设为100%，让图片充满整个容器。 此外，还可以结合CSS3的`object-fit`属性，提供更丰富的自适应策略。例如，`object-fit: cover`可以让图片填充容器，同时保持纵横比，而`object-fit: contain`则会让图片在不超出容器的前提下，完整显示。 通过JavaScript获取图片实际宽高并结合CSS样式，我们可以实现灵活的图片自适应策略，以适应不同的页面布局需求。这些技术对于创建响应式网页设计尤其重要，可以确保在不同设备和屏幕尺寸下，图片都能以最佳方式呈现。