开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

jquery获取图片实际宽高

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。获取图片的实际宽高是前端开发中常见的需求，尤其是在需要根据图片尺寸进行布局调整或动态加载时。

相关优势

简化代码：jQuery 提供了简洁的 API，使得获取图片宽高变得非常简单。
跨浏览器兼容性：jQuery 处理了不同浏览器之间的差异，确保代码在各种环境下都能正常工作。
动态获取：可以在图片加载完成后动态获取其实际宽高，适用于响应式设计和动态内容加载。

类型

获取图片实际宽高的方法主要有两种：

使用 width() 和 height() 方法：这些方法可以直接获取元素的宽度和高度。
使用 attr() 方法：可以获取图片的 width 和 height 属性。

应用场景

响应式设计：根据图片的实际尺寸调整布局。
动态加载：在图片加载完成后进行某些操作，如计算布局或显示加载进度。
图片裁剪和缩放：根据实际尺寸进行图片处理。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>获取图片实际宽高</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <img id="myImage" src="path/to/your/image.jpg" alt="示例图片">
    <script>
        $(document).ready(function() {
            $('#myImage').on('load', function() {
                var width = $(this).width();
                var height = $(this).height();
                console.log('图片宽度: ' + width + 'px');
                console.log('图片高度: ' + height + 'px');
            });
        });
    </script>
</body>
</html>

可能遇到的问题及解决方法

图片未加载完成：如果在图片未完全加载时获取宽高，可能会得到 0 或不正确的值。解决方法是在图片加载完成后获取宽高，可以使用 load 事件。
图片未加载完成：如果在图片未完全加载时获取宽高，可能会得到 0 或不正确的值。解决方法是在图片加载完成后获取宽高，可以使用 load 事件。
跨浏览器兼容性：不同浏览器可能会有不同的行为。使用 jQuery 可以减少这种差异，但仍需注意检查和处理特殊情况。
图片路径错误：如果图片路径错误，图片将无法加载，宽高获取也会失败。确保图片路径正确。

总结

通过 jQuery 获取图片实际宽高是一个简单且常见的任务。使用 width() 和 height() 方法可以在图片加载完成后获取其实际尺寸，适用于各种前端开发场景。遇到问题时，可以通过检查图片加载状态和处理跨浏览器兼容性来解决。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

javascript 快速获取图片实际大小的宽高

javascript 快速获取图片实际大小的宽高简陋的获取图片实际宽高的方式 // 图片地址 var img_url = '13643608813441.jpg' // 创建对象 var img =...宽高都是0的这个结果很正常，因为图片的相关数据都没有被加载前它的宽高默认就是0，我们需要它加载完所有的相关数据再获取宽和高。...从缓存里读取图片的宽高不用说，非常方便快捷，今天我们要解决的是没有缓存而又快速的相比onload更快的方式去获取图片的宽高。...+start_time // 创建对象 var img = new Image() // 改变图片的src img.src = img_url // 定时执行获取宽高 var check = function...这是一张2560 * 1600大小的图片，各浏览器执行结果都能看到通过快速获取图片大小的方法几乎都在200毫秒以内，而onload至少五秒以上，这差别之大说明快速获取图片宽高非常实用。

5.6K1 0

JQUERY获取loaded 宽高这么变态

JQUERY获取loaded 宽高这么变态： $('').attr('src',img.src).load(function() { img.Owidth = $(this).width

7741 0

JS获取图片原始宽高

最近在给博客的相册模块做优化，需要知道图片的原始大小，我以前的做法是把图片的真实宽高分别放在data-width和data-height中，效果是达到了，但是总觉得扩展性很低，当不知道图片的大小时，还要一张一张图片的去查看图片信息手动输入图片大小...，很繁琐获取图片大小： 1.使用innerWidth,innerHeight 使用HTMLImageElement.innerWidth 是可以拿到图片的宽度但是需要注意的是这里拿到的宽度是图像在CSS...像素中渲染的宽度也就是说如果图片原始大小1200，使用css或者width属性设置为600，那么这里拿到的宽度为600，显然用innerWidth获取图片原始尺寸是不靠谱的 2.使用document.createElement...document.createElement("img") img.src = "1.jpg" var width = img.width 动态创建一个imgElement，通过给src赋值，最终来获取...img的宽和高需要注意的是在给img的src赋值时，这是一个异步过程，会存在获取img的宽度时值为0(图片还未加载完成)，可以在给img赋值之前加上onload事件 var img = document.createElement

6.4K2 0

.Net 上传图片之前获取图片的宽高

Stream st = Request.Files[0].InputStream; Byte...

1.1K2 0

Android 通过图片url获取图片的宽高

//获取图片真正的宽高 Glide.with(mContext).asBitmap().load(list.get(0).imagePath).into(new SimpleTarget

1.9K3 0

php getimagesize 获取图片宽高以及后缀

获取文件宽高在 PHP 中有一个简单函数 getimagesize。只需要传递文件名即可。...给出的是图像的 MIME 信息，此信息可以用来在 HTTP Content-type 头信息中发送正确的信息，如： header("Content-type: image/jpeg"); 可见返回内容为数组,我们获取数组下标即可...php $width = $image_arr[0]; $height = $image_arr[1]; $type = $image_arr[6]; 另外、我们也可以使用 list 来获取数据.

1.9K2 0

JavaScript与jQuery获取元素的宽、高和位置

今天汇总整理了 JavaScript 和 jQuery 获取元素宽高和位置的方法，比较全面，方便自己和需要并搜到此文章的朋友们查看。...可视宽高 clientHeight ：元素的可视高度（包括内边距，不包括边框、外边距或滚动条） clientWidth ：元素的可视宽度（包括内边距，不包括边框、外边距或滚动条）自身宽高 offsetHeight...（滚动条滚去的宽度） scrollTop ：是该元素的显示（可见）的内容与该元素实际的内容的距离（滚动条滚去的高度） jQuery中： ?...元素的宽高 width() ：获得或设置元素【内容】的宽；若元素的display：none，其值为0 height() ：获得或设置元素【内容】的高；若元素的display：none，其值为0 innerWidth...浏览器相关宽高 $(window).height() ：获取浏览器可视窗口的高度； $(document).height() ：获取整个网页文档的高度；当网页高度不足浏览器窗口时，返回的是 $(window

3.1K0 0

JS实现本地预览上传图片并获取宽高

我们在本地上传文件、图片是用file类型的表单，大多时候我们想让上传的图片先预览在我们本地，下面来看看代码吧。...//定以一个读取文件的对象 var reader = new FileReader(); reader.onload = function (evt) { //获取的是图片的...但是没有图片的宽度和高度，获取图片的宽度和高度需要用到Image() 对象。 function selectImg(file) { if (!file.files || !...//定以一个读取文件的对象 var reader = new FileReader(); reader.onload = function (evt) { //获取的是图片的...：" + image.width + " px"); console.log("图片高度：" + image.height + " px"); // 再将获取值赋给img

8K2 0

ReactNative 获取屏幕宽高

需要导入Dimensions let Dimensions = require('Dimensions'); // 示例 class KKScreen { ...

2.1K4 0

Flutter 获取屏幕宽高

屏幕宽度： MediaQuery.of(context).size.width 屏幕高度： MediaQuery.of(context).size.height

1.6K1 0

获取元素尺寸宽高

DOCTYPE html> 2 3 4 5 6 获取元素尺寸宽高 18 19 20 Prosper 21 22 23 /** 24 * 获取元素尺寸宽高

1.2K3 0

通过元素的 getBoundingClientRect() 方法获取元素的实际宽高与实际展示的不符合

video-container { height: calc(100% - 90px); } } } 现象：通过元素的 getBoundingClientRect() 获取的元素宽高与实际展示的不相符...原因：这里获取的是初始化给该元素设置的宽高，如果后续通过 css 媒体查询或者其他条件修改了元素的宽高，这里会有一个异步或时间顺序问题，导致获取的与实际的不一致解决：由于我这里的属性 v-direction...视频的方向是通过监听视频的相关事件获取之后，赋值到 body 上的，所以这里是一个异步函数，执行顺序一定在 getBoundingClientRect() 之后，于是我需要加个 setTimeout

6504 0

js图片监听onload事件，依然有获取不到宽高的场景

背景在实际开发中，移动端页面遇到的，采用正常写法，图片 src赋值写在 onload 事件监听后面，依然会有拿不到图片真实宽高的场景，获得的图片宽高都为0，真的是好坑啊。...img = new Image() // 加载完成执行 img.onload = function(){ console.log(img.width,img.height) } // 改变图片的...为了避免图片加载失败或不存在等长场景导致定时器一直执行，可以加一个兜底，比如10秒钟之后自动清除定时器。...var img = new Image() // 改变图片的src img.src = img_url // 定时执行获取宽高 var check = function(){ // 只要任何一方大于...0 // 表示已经服务器已经返回宽高 if (img.width>0 || img.height>0) { clearInterval(set); } } var

4K2 0

第76天：jQuery中的宽高

Document对象的location属性也是引用了location属性也是引用了location对象 Window.location===document.location//true 与window相关的宽高介绍....screen.width .screen.availHeight .screen.availWidth Window.screenTop Window.screenLeft 与document相关的宽高介绍...若没有滚动条，即为元素设定的宽高若有滚动条，则为原来宽高减去滚动条的宽高无padding无滚动：clientWidth=style.width 有padding无滚动：clientWidth=style.width

6411 0

Activity中获取View的宽高

有些时候我们需要获取到View的宽高信息。在onCreate和onResume中尝试view.getWidth()或是view.getHeiht()时，我们会发现获取到的是0。...获取宽高正确的方法有哪些呢？...方法1 - 在Activity的onWindowFocusChanged获取宽高 @Override public void onWindowFocusChanged(boolean hasFocus)...view的宽高。...应用 - 动态调整ImageView的宽高获取到view的宽高后，我们可以动态地调整ImageView的高度。假设图片宽高为704 * 440。xml中设置scaleType为fitXY。

1.6K1 0

js获取各种距离和宽高

以整个页面的左上角为原点, 距离页面左侧的距离, 随页面滚动而改变 screenX 以计算机显示屏屏幕左上角为原点, 距离屏幕顶部的距离 screenY 以计算机显示屏屏幕左上角为原点, 距离屏幕左侧的距离元素的宽高及各种距离...宽高属性说明 clientHeight/clientWidth 包括元素的可视部分的高度/宽度包括width/height和padding不包括border和滚动条如果是content-box,则为...为字符串类型) 距离属性说明 offsetTop/Left 元素距离最近的带有定位(fixed/relative/absolute)的父元素的顶部/左侧的距离 scrollTop/Left 此属性可以获取或者设置对象的最顶部到对象在当前窗口显示的范围内的顶边

2371 0

获取浏览器可视区域宽高

1 /** 2 * 获取浏览器可视区域宽度 3 */ 4 function getViewPortOffset() { 5 if (window.innerWidth

9393 0

js获取屏幕以及元素宽高的方法

一.window相关网页正文部分上：window.screenTop 网页正文部分左：window.screenLeft 屏幕分辨率的高：window.screen.height 屏幕分辨率的宽：...document.body.clientWidth 网页可见区域高：document.body.clientHeight 网页可见区域宽：document.body.offsetWidth (包括边线的宽...) 网页可见区域高：document.body.offsetHeight (包括边线的宽) 网页正文全文宽：document.body.scrollWidth 网页正文全文高：document.body.scrollHeight...网页被卷去的高：document.body.scrollTop 网页被卷去的左：document.body.scrollLeft 三.滚动相关 scrollHeight: 获取对象的滚动高度。...相对容器的水平坐标 event.offsetY 相对容器的垂直坐标六.width/clientWidth/offsetWidth以及height之间区别 width是指可见内容的宽 height是指可见内容的高

6.9K2 0

iOS获取屏幕宽高、设备型号、系统版本信息介绍1、获取屏幕的宽高2、获取设备的型号3、获取系统版本

之前也研究过，这里把我的方法记录下来，本文介绍三个常用的设备信息获取方式：获取屏幕的宽高。用于在设置控件位置的时候计算相对屏幕的距离获取设备的型号。...1、获取屏幕的宽高屏幕的宽高是一个常常需要用到的信息，尤其是当你用代码写UI时。比如当你写一个UILabel，设置其frame时，你想要它居中，而你想为其设置的宽度为200，那怎么设置它的x值呢？...获取屏幕宽、高的方法如下： // 设备宽度 [UIScreen mainScreen].bounds.size.width // 设备高度 [UIScreen mainScreen]....bounds.size.height 一般来说我们在pch文件里将其设置为宏，这样在每个地方就都可以调用了，就不用每次都用这么长一串代码： //设备的宽高 #define SCREENWIDTH...2、获取设备的型号获取设备型号有几种方法，这里我使用的是比较笨的方法，获取设备的分辨率来判断设备的型号。

2.6K4 0

ElementUI——el-upload上传前校验图片宽高

element.eleme.cn/#/zh-CN/component/upload 内容 before-upload 借助于:before-upload来进行校验，使用FileReader和Image来获取图片宽高

2351 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭