naturalWidth 与 naturalHeight
2024-10-11 04:00:54
在HTML 5中,新增加了两个用来判断图片的宽度和高度的属性(图片原始大小),分别为
naturalWidth 和naturalHeight属性,例子如下:
注意问题:
- 图片没有加载的时候 值为0,0
- 与img 设置的width 和height 无关,是图片的原始大小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="../base/jquery.js"></script>
</head>
<body>
<img width="200" height="125"
src="//www.baidu.com/img/baidu.gif"
id="abc"> <script>
$(function () {
$("#abc").on("load", function () {
//jquery写法
var imgW = $("#abc")[0].naturalWidth;
var imgH = $("#abc")[0].naturalHeight; //javascript写法
var imgW = myimage.naturalWidth;
var imgH = myimage.naturalHeight; alert("原始大小:宽:" + imgW + "高:" + imgH); var imgWidth = $("#abc")[0].width;
var imgHeight = $("#abc")[0].height; alert("显示: 宽:" + imgWidth + "高:" + imgHeight); })
})
</script>
</body>
</html>
最新文章
- android学习第一篇 基本概念
- STM32之DAC君
- IOS基础之 (设计模式)
- Linux应用程序访问字符设备驱动详细过程【转】
- Microsoft Dynamics CRM 2013 安装过程 图解
- 【HTML】Beginner4:Heading
- R语言-来自Prosper的贷款数据探索
- 微服务框架——SpringCloud(三)
- php-cgi占用太多cpu资源而导致服务器响应过慢
- navicat连接mysql出现Client does not support authentication protocol requested by server解决方案
- 编程总结5&;学习总结
- python练习册 0002随机生成验证
- jvm系列
- jquery不能实时获取CKEDITOR值的解决方法
- 文字过多以省略号代替,放在文字上会显示title信息提示
- docker-部署elk-6.1.3
- Todolist分别用React与Vue的实现与思考
- 洛谷P1903 数颜色 [国家集训队] 莫队
- Lintcode: Insert Node in a Binary Search Tree
- ArchLinux - 安装指南