开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

jquery获取img的宽高

基础概念

jQuery 是一个快速、小巧、功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。获取图像的宽度和高度是 jQuery 中常见的操作之一。

相关优势

简化 DOM 操作：jQuery 提供了简洁的语法来选择和操作 DOM 元素。
跨浏览器兼容性：jQuery 处理了不同浏览器之间的差异，使得代码在不同环境中都能正常工作。
丰富的插件支持：jQuery 有大量的插件库，可以轻松扩展功能。

类型

获取图像宽度和高度的方法主要有两种：

获取实际宽度和高度：
获取实际宽度和高度：
获取原始宽度和高度（未加载时的尺寸）：
获取原始宽度和高度（未加载时的尺寸）：

应用场景

动态调整布局：根据图像的实际尺寸动态调整页面布局。
图像加载完成后的处理：在图像完全加载后获取其尺寸，进行后续处理。
响应式设计：根据图像尺寸调整不同设备上的显示效果。

遇到的问题及解决方法

问题：获取到的宽度和高度为 0

原因：图像尚未完全加载，导致获取到的宽度和高度为 0。

解决方法：在图像加载完成后再获取其宽度和高度。

$('img').on('load', function() {
    var width = $(this).width();
    var height = $(this).height();
    console.log('Width: ' + width + ', Height: ' + height);
});

问题：跨浏览器兼容性问题

原因：不同浏览器对 DOM 操作的支持可能有所不同。

解决方法：使用 jQuery 提供的跨浏览器兼容的方法。

var width = $('img').width();
var height = $('img').height();

示例代码

以下是一个完整的示例，展示了如何在图像加载完成后获取其宽度和高度：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Get Image Dimensions</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="Sample Image">

    <script>
        $(document).ready(function() {
            $('#myImage').on('load', function() {
                var width = $(this).width();
                var height = $(this).height();
                console.log('Width: ' + width + ', Height: ' + height);
            });
        });
    </script>
</body>
</html>

通过上述方法，你可以轻松获取图像的宽度和高度，并处理相关的问题。

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

有帮助

没帮助

相关·内容

JQUERY获取loaded 宽高这么变态

JQUERY获取loaded 宽高这么变态： $('img/>').attr('src',img.src).load(function() { img.Owidth = $(this).width...(); img.Oheight = $(this).height(); }).appendTo($('body')).hide(); 还不如： $('img/>').attr('src', $

7741 0

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

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

3.1K0 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

Activity中获取View的宽高

有些时候我们需要获取到View的宽高信息。在onCreate和onResume中尝试view.getWidth()或是view.getHeiht()时，我们会发现获取到的是0。...获取宽高正确的方法有哪些呢？...方法1 - 在Activity的onWindowFocusChanged获取宽高 @Override public void onWindowFocusChanged(boolean hasFocus)...view的宽高。...从log的时间上可以看出，在view加载完毕后，执行的Runnable。应用 - 动态调整ImageView的宽高获取到view的宽高后，我们可以动态地调整ImageView的高度。

1.6K1 0

第76天：jQuery中的宽高

对象的一部分浏览器的HTML文档成为dicument对象 Window.location和document.location Window对象的location属性饮用的是location对象，表示该窗口中当前显示文档的...相关的宽高介绍 Window.innerWidth//浏览器窗口的内部宽度 .innerHeight//浏览器窗口的内部高度 .outerWidth .outerHeight Window.screen....screen.width .screen.availHeight .screen.availWidth Window.screenTop Window.screenLeft 与document相关的宽高介绍...若没有滚动条，即为元素设定的宽高若有滚动条，则为原来宽高减去滚动条的宽高无padding无滚动：clientWidth=style.width 有padding无滚动：clientWidth=style.width...和offsetHeight 指元素的border+padding+content的宽度和高度该属性和内部的内容是否超出元素大小无关，只和设定的border以及width和height有关无padding

6411 0

JS获取图片原始宽高

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

6.4K2 0

js获取各种距离和宽高

浏览器滚动掉的Y距离鼠标event事件属性说明 offsetX 以当前的元素的左上角为原点, 距离元素顶部的距离 offsetY 以当前的元素的左上角为原点, 距离元素左侧的距离 clientX..., 距离页面顶部的距离, 随页面滚动而改变 pageY 以整个页面的左上角为原点, 距离页面左侧的距离, 随页面滚动而改变 screenX 以计算机显示屏屏幕左上角为原点, 距离屏幕顶部的距离 screenY...以计算机显示屏屏幕左上角为原点, 距离屏幕左侧的距离元素的宽高及各种距离宽高属性说明 clientHeight/clientWidth 包括元素的可视部分的高度/宽度包括width/height...'px', 为字符串类型) 距离属性说明 offsetTop/Left 元素距离最近的带有定位(fixed/relative/absolute)的父元素的顶部/左侧的距离 scrollTop/Left...此属性可以获取或者设置对象的最顶部到对象在当前窗口显示的范围内的顶边/左侧的距离，也就是元素滚动条被向下/向右拉动的距离。

2371 0

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

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

buffer.Length); MemoryStream stream = new MemoryStream(buffer); Bitmap img...= new Bitmap(stream); int width = img.Width; int height = img.Height

1.1K2 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

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

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

1.9K3 0

js和jQuery获取img标签的src属性获取不到的解决方法

很多朋友可能遇到过，用 jQuery 获取 img 标签的 src 属性却获取不到的问题： img id="test" src="1.jpg" alt="test" /> 使用如下的语句都会出错：...alert($('#test')); alert($('#test').src); 使用 $('#test').src 语句不会出错，但获取不到 img 的地址。...img 的地址。...拓展： JS获取 img 的 src 值： //方法一： var path = $('#test').attr('src'); //方法二： var path = document.getElementById...("test").src; //方法三： var path = $("#test")[0].src; 声明：本文由w3h5原创，转载请注明出处：《js和jQuery获取img标签的src属性获取不到的解决方法

18.9K6 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

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

获取文件宽高在 PHP 中有一个简单函数 getimagesize。只需要传递文件名即可。...索引 1 给出的是图像高度的像素值索引 2 给出的是图像的类型，返回的是数字，其中1 = GIF，2 = JPG，3 = PNG，4 = SWF，5 = PSD，6 = BMP，7 = TIFF(intel...，可以直接用于 HTML 的标签索引 bits 给出的是图像的每种颜色的位数，二进制格式索引 channels 给出的是图像的通道值，RGB 图像默认是 3 索引 mime 给出的是图像的...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

详解各种获取元素宽高及位置的属性

对于文档的body对象，它包括代替元素的CSS高度线性总含量高。浮动元素的向下延伸内容高度是被忽略的。 var offsetHeight = element.offsetHeight; ?...），而 offsetWidth 和 offsetHeight 描述的是边界框的尺寸（使用 Element.getBoundingClientRect 来获取其位置）。...scrollTop Element.scrollTop 属性可以获取或设置一个元素的内容垂直滚动的像素数。...; 完整的获取文档/页面在水平方向已滚动的像素值的兼容性代码： var x = (window.pageXOffset !...，其中 pageYOffset 属性是 scrollY 属性的别名 var scrollX = window.scrollY; 完整的获取文档/页面在垂直方向已滚动的像素值的兼容性代码： var y =

4K8 0

获取浏览器可视区域宽高

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

9393 0

iOS 计算NSString宽高与计算NSAttributedString的宽高

开篇项目有一个客服反馈功能，用到的是聊天列表的形式，这就免不了计算字符串的宽高，由于要给字符串加间距，没办法，只能用 NSAttributedString 所以要计算NSAttributedString...的长宽计算NSString宽高计算NSString宽高很简单，代码如下： //返回字符串所占用的尺寸. - (CGSize)sizeWithFont:(UIFont *)font maxSize:(...（包含大小信息） maxSize 是一个最大的距离：如我最大的宽度只让他为200，高度不限，则传入： CGSizeMake(200 , CGFLOAT_MAX) 计算NSAttributedString...宽高先查看系统API： ?...（包含大小信息） text：将要计算的�字符串 needWidth：将要计算的最大宽度 lineSpacing：行间距大小当然关于 NSAttributedString 的设置还有很多，不一一列举了

5.1K3 0

TextField的高宽autosize

大家好，又见面了，我是你们的朋友全栈君。...var t_name:TextField = new TextField; trace(t_name.height); trace(t_name.width); 这样打印出来的高度都是100PX，是系统默认的...如果不设置可能会让父容器宽高变大，遮挡住别的窗口的鼠标事件。可以简单地使用tf.autoSize=TextFieldAutoSize.LEFT;来解决这样宽高就会根据文本内容大小来调整了。...如果文本中包括换行符（例如 “\n” 或 “\r”），则会另外调整底边来适合文本的下一行。如果 wordWrap 也设置为 true，则仅调整文本字段的底边，而右边距保持固定。...如果文本中包括换行符（例如 “\n” or “\r”)），则会另外调整底边来适合文本的下一行。如果 wordWrap 也设置为 true，则仅调整文本字段的底边，而左边距保持固定。

1K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭