<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>JQ 获取图片真实宽高</title>
<script>window.jQuery || document.write(unescape("%3Cscript src='http://libs.baidu.com/jquery/1.10.1/jquery.min.js' type='text/javascript'%3E%3C/script%3E")); </script>
<style type="text/css">
#image{ width: 200px; height: 150px;}
</style>
</head>
<body>
<img src="aaa.jpg" width="400" height="300" id="image">
<script type="text/javascript">
$(function(){
var imgSrc = $("#image").attr("src");
getImageWidth(imgSrc,function(w,h){
console.log({width:w,height:h});
});
});
function getImageWidth(url,callback){
var img = new Image();
img.src = url;
// 如果图片被缓存，则直接返回缓存数据
if(img.complete){
callback(img.width, img.height);
}else{
// 完全加载完毕的事件
img.onload = function(){
callback(img.width, img.height);
}
}
}
</script>
</body>
</html>
效果图：
相关推荐
在这种情况下，为了获取图片在加载完成后的真实宽度和高度，我们可以采取一种更加准确的方法：在图片的`onload`事件发生后去获取这些尺寸。 具体的实现方法如下：首先，我们需要一个`<img>`标签，并为其设置一个`id...
在网页开发中，正确地获取图片真实的宽度和高度对于布局和响应式设计至关重要。尤其是在PC端和移动端，根据图片的尺寸调整展示方式可以提供更好的用户体验。以下将详细讲解JavaScript（JS）和jQuery如何获取图片真实...
以下是一个基本的示例，用于获取图片的真实宽度和高度： ```javascript function getImageRealSize(img) { var imgObj = new Image(); imgObj.src = img.src; return { width: imgObj.naturalWidth, height: ...
2. **尺寸获取**：使用`width()`和`height()`函数获取图片的原始宽度和高度。这是调整容器大小的基础。 3. **容器初始化**：创建一个用于展示图片的容器，并设置其初始大小。通常，容器的宽高会被设置为相对单位，...
1. 首先，我们需要获取图片的真实宽度和高度。这可以通过`naturalWidth`和`naturalHeight`属性来实现。 2. 接着，计算出图片应适应的容器宽度（假设为`containerWidth`）。 3. 使用这个宽度，根据比例计算出新的...