首页
学习
活动
专区
工具
TVP
发布

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的宽和...var width = img.width } img.src = "1.jpg" 3.使用naturalWidth(推荐) 使用HTMLImageElement.naturalWidth拿到图像在CSS

5.9K20
您找到你想要的搜索结果了吗?
是的
没有找到

CSS 世界》读书笔记-流与

如果不指定,默认会继承父元素的宽度,并且独占一行,即使宽度有剩余也会独占一行。例子中,宽度继承于父元素 body。 2. 高度一般以子元素撑开的高度为准,当然也可以自己设置宽度和高度。...外在盒子负责让元素可以一行显示,还是只能换行显示;内在盒子负责、内容呈现什么的,也叫容器盒子。...而内在盒子实际是负责了元素的和内容。 内在盒子由内到外又可分为:content box、padding box、border box 和 margin box。...仔细地看,我们会发现 content box 是环绕着 content 给定的矩形,所以 width: 100px 作用在了 content box 上。...总结 在这篇笔记中,主要总结了流与之间是如何相互影响的,同时还探索了部分盒模型的问题。希望能给大家在平常开发时,带来一定的启发。 紧追技术前沿,深挖专业领域 扫码关注我们吧!

1.2K20

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: 获取对象的滚动高度。...height是指可见内容的 clientWidth = width + padding clientHeight = height + padding offsetWidth = width + padding

6.7K20

追求完美代码之——实现元素拖拽修改和位移插件

前言 我们如果使用过ppt、keynote,元素的小控件一定少不了,可以实现修改修改和位移,大概是这样 ? ? 最终效果预览: ?...下面,我们从0开始,使用原生js实现这个效果,并封装成插件 过程分析 一个元素正常展示。...点击的时候,会多出边框,边框的角落会有拖拽修改的控件,控件位置、大小和元素一模一样 点击某个角落的拖拽控件,以该控件的的中心对称点为中心点,变更宽。...接着,我们需要把四个角的控件加上,拖拽一个角控制的: 它们的样式先来一个 .controller-corner { width: 10px; height...拖右边两个角,只改变宽改变量和新的是正相关的;拖左边两个角,除了还要改变top、left,而且改变量和新的是负相关的 ? ?

1.9K41

js 获取屏幕各种的方法(浏览器兼容)

屏幕的有效: window.screen.availHeight window.screen.availWidth 网页可见区域:document.body.clientWidth  网页可见区域...:document.body.clientHeight  网页可见区域:document.body.offsetWidth (包括边线的)  网页可见区域:document.body.offsetHeight...(包括边线的)  网页正文全文:document.body.scrollWidth  网页正文全文:document.body.scrollHeight  网页被卷去的:document.body.scrollTop...  网页被卷去的左:document.body.scrollLeft  网页正文部分上:window.screenTop  网页正文部分左:window.screenLeft  屏幕分辨率的:window.screen.height...clientWidth = width - border clientHeight = height - border offsetWidth = width offsetHeight = height (需要提一下:CSS

3.5K100

零基础入门 32:修改组件的位置..旋转.缩放

已经不止一两个同学来问过我这个问题了,如何修改一个组件的位置啊,啊,旋转啊,缩放啊之类的问题,鉴于好多同学都有这个疑问,我就单独把他抽出一个小分享内容列出来。 ?...从上图可以看出来,刚刚创建的Image,大家所关心的位置啊,啊,旋转啊,缩放啊,都通通在一个叫RectTransform的组件内,所以大家想知道的这些信息也都属于这个RectTransform的属性...对于来说,就是我们下面的Width和Height属性 ? 旋转值就是Rotation属性 ? 缩放就是Scale属性 ?...m_image.rectTransform.anchoredPosition = new Vector2(50.0f, 50.0f); //修改 m_image.rectTransform.sizeDelta...//修改 m_image.rectTransform.sizeDelta = new Vector2(120.0f, 120.0f); //修改旋转 m_image.rectTransform.localRotation

51530
领券