jquery如何获取图片高度
jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。在 jQuery 中获取图片高度非常简单。
基础概念
jQuery 提供了 .height() 方法来获取元素的高度。对于图片元素，你可以直接使用这个方法来获取其高度。
相关优势
- 简化代码：jQuery 的语法简洁，使得代码更加易读和维护。
- 跨浏览器兼容性：jQuery 处理了不同浏览器之间的差异，使得代码在不同环境中都能正常工作。
- 丰富的功能：除了基本的 DOM 操作，jQuery 还提供了动画、事件处理等高级功能。
类型
- 获取高度：使用
.height()方法。 - 设置高度：使用
.height(value)方法。
应用场景
在网页开发中，经常需要动态获取图片的高度，以便进行布局调整或动画效果实现。
示例代码
<!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() {
var imageHeight = $('#myImage').height();
console.log('图片高度: ' + imageHeight + 'px');
});
</script>
</body>
</html>可能遇到的问题及解决方法
问题：图片未加载完成时获取高度不准确
原因：图片在页面加载时可能还未完全加载，此时获取的高度可能为 0。
解决方法：使用 $(window).on('load', function() { ... }) 确保图片加载完成后再获取高度。
$(window).on('load', function() {
var imageHeight = $('#myImage').height();
console.log('图片高度: ' + imageHeight + 'px');
});问题：获取的高度包含边框和内边距
原因：.height() 方法默认获取的是元素的 content height，不包括边框和内边距。
解决方法：使用 .outerHeight() 方法可以获取包括边框和内边距的总高度。
var imageHeightWithPadding = $('#myImage').outerHeight();
console.log('图片总高度（含边框和内边距）: ' + imageHeightWithPadding + 'px');通过以上方法，你可以轻松地在 jQuery 中获取图片的高度，并解决常见的相关问题。
相关·内容
但是图像是上传到服务器上的，所以它们的高度是可变的，所以我不能对它们使用top: xx px；。
我能只用css解决这个问题吗？我试着在这里弄清楚这个问题：
浏览 0提问于2011-10-10得票数 0
回答已采纳
</div> <img src="#" />使用 max-width:100%;在调整窗口大小和加载页面时，如何检索图像的高度当我使用下面的代码时，我得到的高度是0。
浏览 0提问于2012-05-03得票数 1
回答已采纳
我需要使用javascript/jquery显示图像大小(以千字节为单位)和尺寸(高度、宽度)。我遇到过几个类似的帖子，但没有一个能帮到我。我有两套代码，分别工作。我想不出怎么把它们放在一起。
浏览 1提问于2013-11-06得票数 10
回答已采纳
2回答
目前我正在尝试获取远程图像的宽度/高度。我正在开发一个链接共享模块，当你在facebook上粘贴链接时，你可以看到标题，描述和图片。所以我试着用php getimagesize来获取图像的宽/高，速度非常慢。我试过这样的东西
var img = $('
浏览 1提问于2010-08-29得票数 7
回答已采纳
我正在做一个简单的图库，里面有超文本标记语言、CSS和jQuery。当用户点击一张图片时，该图片的一个较大的版本应该会在后面有一个覆盖的框架中弹出。您可以在CodePen上查看我的工作示例：如何获取较大图片URL的高度和宽度并放入框架中？
浏览 27提问于2016-08-29得票数 0
在加载图像本身之前，我需要获取图像的高度和宽度。因此，我使用jquery .load()方法。,someURL).load(function(){ console.log(this.height);但问题是，我需要根据固定宽度的高度假设图片大小为400*417，我需要的是200而不是400的高度。>').attr({'width':20
浏览 4提问于2015-05-28得票数 0
回答已采纳
我试图用它返回不带渲染图片宽度/高度的IFRAME height。在图片加载和渲染时，如何获取IFRAME的实际宽度/高度，或者如何告诉IFRAME设置图片的自然高度/宽度？
谢谢!
浏览 4提问于2016-05-02得票数 0
>" id="cpBackgroundImg">
这样做的问题是，如果你查看谷歌主页，他们实际上得到了图像的尺寸，所以在这种情况下，我的宽度是1279px，而高度是自动的。我不得不依靠自动的高度。如果你知道有什么方法可以用jQuery做到这一点，请告诉我。提前谢谢你。
浏览 2提问于2011-05-06得票数 0
回答已采纳
2回答
如果宽度和高度是固定的，这将很容易做到，但这种布局是灵活的，当您调整浏览器窗口的大小时，图像height+width会发生变化。
也许有一种简单的方法可以用Javascript做到这一点呢？
浏览 1提问于2013-02-28得票数 0
2回答
如你所见，主页上有3张照片...如果您调整大小的窗口出现滚动的内容，我不想这样...我想在那里，无论屏幕高度的100%，不会出现滚动。主要内容的高度由jQuery代码确定var meniu= $('.navbar-fixed-top').outerHeightheight', $('#main-content').outerHeight() - 50);
$('#main-content&#x
浏览 0提问于2015-07-31得票数 1
我正在从服务器接收图像url，我想显示这些图像根据图像的原始高度使用图像url。如果有人知道这件事，请帮帮我。
在进阶阶段非常感谢。
浏览 11提问于2016-06-10得票数 1
下面的代码是在.as文件下运行的，所以我不需要写导入等。private var jagFileRefSave:FileReference = new FileReference();private var imagesFilter:FileFilter = new FileFilter("Images", "*.jpg;*.gif;*.png");
upload_Image.addEventListener(Mo
浏览 3提问于2013-01-15得票数 0
回答已采纳
1回答
但我事先不知道这张图片有多大(如果他们上传了一张图片，我可以弄清楚)。如何使用jQuery处理此问题？我知道我可以调用$('img#id_name').width并基于该宽度创建一个画布(并以同样的方式获取高度)。但我希望这是背景图像。
浏览 0提问于2013-01-13得票数 0
有jQuery插件吗？还是需要获取所有维度，然后使用递归函数将其放在一行中？或者，1图像是否具有多维，以获得最佳匹配(排序时)？
浏览 1提问于2014-09-29得票数 0
回答已采纳
我有一个9px填充的<p>标签。在FF和IE8中看起来正常，但在IE7中看起来不正常。它将<p>标签“缩小”。这对查看者来说是显而易见的，因为<p>标签有一个半透明的PNG作为背景，你可以看到它不会像在其他两个浏览器中那样接触到包含<div>的右侧。谢谢!<a href="#">
<img class="off"
浏览 0提问于2011-04-27得票数 1
我的脚本(jQuery)需要获取这些信息，但是当我使用$('# image ').attr(' height ')时，脚本给我的是数字128，这是包含#b和图像的#a元素的高度，而不是图像的预期高度，后者是Firefox可以获得正确的图像高度(186，而不是128)。
如何在Chrome中获取图片的实际原始高度？有没有可能用简单的jQuery来做这件事，或者我必须做一些花招(比
浏览 1提问于2013-09-20得票数 0
一些图片(比如4张图片，每个图片的高度都不同)在一个TabContent中，我写道// Tab function is not the point(只有第一个才能得到真实高度) alert($(this).height());但仍然可以在加载T
浏览 0提问于2011-05-18得票数 0
2回答
在画布上多图像上传和预览图像
、、、、
现在我想修改我的多张上传图片的脚本，这是我的修改脚本：$(function () {
$('#file-input').on('change', function (e) {
浏览 3提问于2014-07-18得票数 1
3回答
我有一张图片的上传表格。当用户选择一个文件时，我需要在上传之前在客户端通过js/jquery获取图片的宽度和高度。= null){ }它调用此函数，但它警告宽度和高度为0
function getImgSize(imgSrc){
浏览 0提问于2011-02-10得票数 1
回答已采纳
云服务器
ICP备案
云直播
即时通信 IM
实时音视频
腾讯云开发者
