js 图片 高宽
在JavaScript中，处理图片的高宽通常涉及到HTML5的<img>元素以及JavaScript的DOM操作。以下是一些基础概念和相关操作：
基础概念
- HTMLImageElement: 在JavaScript中，
<img>元素对应的DOM对象是HTMLImageElement，它包含了图片的各种属性，如width、height、naturalWidth、naturalHeight等。 - width 和 height 属性: 这两个属性可以获取或设置图片的显示尺寸（以像素为单位）。设置这两个属性会改变图片在页面上的渲染大小，但不会改变图片的实际文件大小。
- naturalWidth 和 naturalHeight 属性: 这两个属性表示图片的原始尺寸，即未调整大小的尺寸。
获取图片高宽
var img = new Image();
img.onload = function() {
console.log('Natural dimensions: ' + this.naturalWidth + ' x ' + this.naturalHeight);
console.log('Current dimensions: ' + this.width + ' x ' + this.height);
};
img.src = 'path/to/image.jpg';设置图片高宽
var img = document.getElementById('myImage');
img.width = 300; // 设置显示宽度为300像素
img.height = 200; // 设置显示高度为200像素应用场景
- 响应式设计: 根据不同的屏幕尺寸动态调整图片大小。
- 图片预览: 在用户上传图片前，显示图片的原始尺寸或预览尺寸。
- 图像处理: 在客户端进行简单的图像处理，如裁剪、缩放等。
常见问题及解决方法
- 图片加载延迟: 如果在图片加载完成前尝试获取其尺寸，可能会得到0或未定义的值。解决方法是使用
onload事件确保图片加载完成后再获取尺寸。 - 图片变形: 如果只设置宽度或高度，可能会导致图片比例失调。解决方法是同时设置宽度和高度，或者使用CSS的
object-fit属性来保持图片比例。 - 跨域问题: 如果图片来自不同的域，可能会因为浏览器的同源策略而无法获取其尺寸信息。解决方法是确保图片服务器设置了正确的CORS头部，允许跨域访问。
示例代码
以下是一个完整的示例，展示如何在图片加载完成后获取并设置其尺寸：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image Dimensions</title>
</head>
<body>
<img id="myImage" src="path/to/image.jpg" alt="Sample Image">
<script>
var img = document.getElementById('myImage');
img.onload = function() {
console.log('Natural dimensions: ' + this.naturalWidth + ' x ' + this.naturalHeight);
console.log('Current dimensions: ' + this.width + ' x ' + this.height);
// 设置新的显示尺寸
this.width = 300;
this.height = 200;
};
</script>
</body>
</html>通过上述代码，你可以在控制台中看到图片的原始尺寸和设置后的显示尺寸。
相关·内容
2回答
我有一个内容区，我要在里面放一张图片。如果在宽度为100%的容器中放置后，它的高度小于800px，那么我希望它留在那里。如果它在宽度100%之后超过800px高，我想让它忽略width:100%行，并读取max-height行(或者做一些事情来缩小宽度的百分比)，直到它低于800px高，同时保持它的纵横比。例如。我有一个7
浏览 2提问于2013-05-04得票数 1
1回答
PHP:不同宽度的动态图像网格
、、、、
在我的网站上，我有多张图片，高度相同，但有三个不同的宽度。我想把这些展示在一个漂亮的格子里。上传图片时，我检查图像应该是宽的还是高的。这些图像显示在一个表中，其中一个(s)图像占1个点，中等(m)占2个点，大(l)占3个点。每排有3个点。如果我有8张图片(4高4宽)，我希望它看起来像这样(w =空格)：msl而不是
sss
浏览 1提问于2012-09-29得票数 0
回答已采纳
从今天开始，我们将在auth对话框中收到开发人员警告，并发出以下消息：
我们的情况如下：
浏览 3提问于2013-05-14得票数 26
回答已采纳
1回答
除此之外，还可以将Jlable/按钮放在这张图片上。该图片应该只构成JFrame的一部分。我知道你可以使用setbound(宽，高，宽，高)；但这需要很高的准确性，而且很难做到完全正确。
浏览 3提问于2013-01-09得票数 2
我有一张图片，假设它的分辨率为640宽，480高，我想把它换成facebook的封面(851像素宽，315像素高)，我该如何在iphone中通过编程来做这件事，检查这个以获取封面图片的详细信息，谢谢。
浏览 1提问于2012-12-03得票数 1
回答已采纳
同样的sprite图片在其他浏览器和windows7的mozilla (相同版本)中也可以正常加载，我发现这个问题只存在于Mozilla for windows8中。
浏览 1提问于2015-01-06得票数 0
1回答
我正在使用一个HTML页面，它是从swf转换器创建的。生成的HTML使用SVG图像创建与swf布局匹配的元素。<div class="wlby_5"> <img src="FlashTemplate_assets/svgblock_2.svg" class="wlby_4"></img>
<
浏览 2提问于2012-04-18得票数 0
我在寻找使用获取用户配置文件图片的最佳方法。仔细查看文档，我发现了以下内容：
您可以使用类型参数指定所需的图片大小，它应该是正方形(50x50)、小(50像素宽、变高)、普通(100像素宽、变高)和大(大约200像素宽、可变高)。
浏览 7提问于2012-01-26得票数 9
回答已采纳
1回答
important; 您可以查看此页面的并检查滑块。Js文件在这里
您能告诉我如何更改JS文件以将图像大小调整为width:688px和height:324px
浏览 4提问于2014-03-07得票数 1
我正在将我的iPhone应用程序转换为通用应用程序，并刚刚添加了iPad的启动图像。图像运行良好，但在xCode中有一个大三角形，其中有一个感叹号。这是什么意思？我想可能是因为文件太大了吧？我把它从meg减少到168k，三角形仍然在那里。约翰
浏览 2提问于2011-06-15得票数 2
回答已采纳
3回答
jQuery图片的高/宽
、、、、
我正在尝试获取图像的宽度/高度，以便设置父容器的宽度/高度。下面是我这样做的代码：然后通过以下方法获得图像的宽度/高度我遇到的问题是chrome在图像之前加载jscript，所以函数返回null。所以我把下面的代码放在一起：
$(".test-img").each(fu
浏览 1提问于2011-06-04得票数 0
我正在为图片库制作一个简单的灯箱。问题是图像没有采用#wrapper分区的全高/全宽。我也尝试过width:100%; height:auto;，但如果图像的高度很大，它只会与#wrapper的div重叠。right: 0;
浏览 3提问于2015-12-11得票数 1
4回答
如何在不改变图片比例的情况下将图片放大到最大。所以它要么100%宽，要么100%高
<div class="container"><img src=""></div>
浏览 2提问于2021-11-28得票数 1
1回答
我正在为大学做一个项目，并使用维基百科API来拉入图像，但是一些请求无法返回结果，例如： 查询返回的数据与它应该返回的数据完全相同。我已经尝试过转换为UTF或URLencodinng，尽管上面的内容是从实际的维基百科文章的网址复制而来的。
浏览 6提问于2021-04-02得票数 0
1回答
在这里，一个简单的治安官图片是用表情符号画出来的，并改变了一个主题。所以，我想是时候轮到高尔夫代码郡长了。测试用例 ### ### ### ##### # # # ### # # # # ### ##### #######
浏览 0提问于2018-07-26得票数 30
2回答
Envira图库不显示图像
、、、、
我使用的是Envira Gallery wordpress插件，但在帖子中没有显示图片。我可以在检查器中看到它们，如果我单击链接，图像将在另一个选项卡中打开。然而，无论我做什么，这些图像都只有1px高和20px宽，这意味着它们并不是真的存在。有什么建议吗？
浏览 0提问于2016-03-02得票数 2
我对安卓中的ImageView scaling有很好的了解。但无法理解centerCrop和centerInside这两种语言的完整区别。
浏览 21提问于2016-08-01得票数 1
云服务器
ICP备案
腾讯会议
云直播
对象存储
腾讯云开发者
