首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何从href中获取原始大小的图像(高度和宽度),并将它们放在属性上。使用jquery

从href中获取原始大小的图像(高度和宽度),并将它们放在属性上,可以通过以下步骤实现:

  1. 使用jQuery选择器选择需要获取原始大小的图像元素。例如,可以使用类选择器选择所有带有特定类名的图像元素:$('.image-class')
  2. 使用.attr()方法获取图像元素的src属性值,该属性值包含图像的URL。
  3. 创建一个新的Image对象,并将图像的URL赋值给src属性。
  4. 在图像加载完成后,可以通过naturalWidthnaturalHeight属性获取图像的原始宽度和高度。
  5. 将获取到的原始宽度和高度设置为图像元素的属性。例如,可以使用.attr()方法将宽度和高度设置为data-widthdata-height属性:$(this).attr('data-width', image.naturalWidth)$(this).attr('data-height', image.naturalHeight)

以下是一个示例代码:

代码语言:txt
复制
$('.image-class').each(function() {
  var imageUrl = $(this).attr('src');
  var image = new Image();
  image.src = imageUrl;
  image.onload = function() {
    $(this).attr('data-width', image.naturalWidth);
    $(this).attr('data-height', image.naturalHeight);
  };
});

这样,每个图像元素都会获取到其原始大小,并将宽度和高度存储在data-widthdata-height属性中。你可以根据需要进一步处理这些属性值,例如用于显示图像的缩略图或其他用途。

推荐的腾讯云相关产品:腾讯云对象存储(COS)。

腾讯云对象存储(COS)是一种安全、高可用、低成本的云端存储服务,适用于存储和处理任意类型的文件,包括图像文件。你可以使用腾讯云对象存储(COS)来存储图像文件,并通过其提供的API获取图像的元数据,包括原始宽度和高度。

腾讯云对象存储(COS)产品介绍链接地址:https://cloud.tencent.com/product/cos

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

前端特效开发 | JS实现聚光灯看图效果

案例实现 3.1 获取当前图片大小 借助JQfind方法找到图片img,获取其宽高大小与设定透明值一起存放在对象,以便后期使用时候可以直接拿取。...之后借助样式设置方法.css(),为列表项每个列表设置当前图片大小使用对象.属性方式取得前面对象存储值。...具体代码如下所示: var spotlight = { opacity : 0.2, // 下面是为图像宽度高度,可以做相同大小 imgWidth : $('.spotlight...ul li').find('img').width(), imgHeight : $('.spotlight ul li').find('img').height() }; // 将列表项宽度高度设置为与图像相同...'.spotlight ul li').find('img').height() }; // 将列表项宽度高度设置为与图像相同 $('.spotlight

4.4K50

无比强大图片裁剪工具库!牛X!

基于canvas技术,支持canvas浏览器都可以使用该插件。 通过Base64编码导出剪裁后图片。 可以通过json数据来获取图片位置大小。 可以通过json数据来设置图片位置大小。...可以通过URL来获取图片。 安装使用 下载安装 cropper需要配合jQuery使用,因此需要同时引入cropperjQuery。...返回值是最终裁切区域位置尺寸数据(基于原始图像自然尺寸),类型:Object。...x:裁切区域左偏移值 y:裁切区域偏移值 width:裁切区域宽度 height:裁切区域高度 rotate:图像旋转角度 scaleX:应用于图像横坐标的比例因子,图片左右翻转量 scaleY...cropper可支持属性多达39个,也对应有获取设置方法。大家可以查阅下面的地址进行查看。

1.9K30
  • jQuery实现图片懒加载

    懒加载原理就是先在页面把所有的图片统一使用一张占位图进行占位,把正真的路径存在元素自定义属性“data-src”(这个名字起个自己认识好记就行)里,要用时候就取出来,把它值赋值给imgsrc...二、获取屏幕高度jqueryheight()javascriptheight 1、jquery各种高度 首先来说一说$(document)$(window),如下: $(document)...).height()高度, 原因: $("body").height():body可能会有边框,获取高度会比$(document).height()小; $("html").height():在不同浏览器获取高度意义会有差异...在jQuery获取元素高度函数有3个,它们分别是height()、 innerHeight()、 outerHeight()。...与此相对应是,获取元素宽度函数也有3个,它们分别是width()、 innerWidth()、 outerWidth()。

    13.6K20

    Python 自动化指南(繁琐工作自动化)第二版:十九、处理图像

    我们可以将元组值赋给widthheight变量 ➋,以便分别访问宽度高度 ➍。filename属性描述原始文件名称。...第一个resize()调用传递了新宽度int(width / 2)高度int(height / 2)➋,所以resize()返回Image对象将是原始图像长度宽度一半,或者说是原始图像大小四分之一...循环os.listdir('.')返回字符串。 size属性获取图像宽度高度。 计算调整后图像宽度高度。 调用resize()方法来调整图像大小。...第三步:调整图片大小 只有当宽度高度大于SQUARE_FIT_SIZE(本例为 300 像素)时,程序才应该调整图像大小,所以将所有调整大小代码放在一个检查widthheight变量if语句中...pillow模块可以处理这些图像格式其他格式。 当一个图像被加载到一个Image对象时,它宽度高度大小作为一个双整数元组存储在size属性

    2.5K50

    让图片完美适应:掌握 CSS object-fit与object-position

    在过去,我们要么在图像编辑器裁剪图像,要么通过设置宽度/或高度约束来调整图像大小(这不是一个完美的选择),或者执行某种复杂裁剪,或者可能转而使用背景图像(如果图像不仅仅是为了装饰的话)。...当我们为图像应用不同宽度/或高度时,我们实际是在改变内容框尺寸。如果内容框尺寸发生变化,图像仍然会填充内容框。...设置 为了详细说明 object-fit 属性工作原理,我们将图像放在一个使用Grid布局居中 div 。...在下面的示例,我们将图像宽度高度限制为100%,这样其内容框就与容器div大小相匹配: img { width: 100%; height: 100%; } 图像及其内容框现在紧密地适应容器...与object-fit: cover不同,我们图像不会被强制在至少一个轴完全可见。原始图像宽度高度都大于内容框,所以它在两个方向上都溢出,如下图所示。

    67010

    BootStrap应用开发学习入门

    HTML5 元素 CSS 属性满足一些新特性: BS设计目标是移动设备优先然后才是桌面设备; BS全局显示、排版链接 响应式布局以及图像响应式 BS支持跨浏览器一致性:使用了 Normalize.css...偏移列 描述:偏移是一个用于更专业布局有用功能, 可用来给列腾出更多空间; 为了在大屏幕显示器使用偏移,请使用 .col-md-offset-*类,其中 * 范围是 1 到 11。..., .form-horizontal #水平表单 与其他表单不仅标记数量不同,而且表单呈现形式也不同 .form-group #把标签控件放在其中是获取最佳间距所必需。...添加四个像素内边距(padding)一个灰色边框, 当鼠标悬停在图像时,会动画显示出图像轮廓。... v3.2.0 版本起,形如 .visible-- 类针对每种屏幕大小都有了三种变体,每个针对 CSS 不同 display 属性,以超小屏幕(xs)为例,可用 .visible-*-* 类是

    17.5K20

    BootStrap应用开发学习入门

    HTML5 元素 CSS 属性满足一些新特性: BS设计目标是移动设备优先然后才是桌面设备; BS全局显示、排版链接 响应式布局以及图像响应式 BS支持跨浏览器一致性:使用了 Normalize.css...偏移列 描述:偏移是一个用于更专业布局有用功能, 可用来给列腾出更多空间; 为了在大屏幕显示器使用偏移,请使用 .col-md-offset-*类,其中 * 范围是 1 到 11。..., .form-horizontal #水平表单 与其他表单不仅标记数量不同,而且表单呈现形式也不同 .form-group #把标签控件放在其中是获取最佳间距所必需。...添加四个像素内边距(padding)一个灰色边框, 当鼠标悬停在图像时,会动画显示出图像轮廓。... v3.2.0 版本起,形如 .visible-- 类针对每种屏幕大小都有了三种变体,每个针对 CSS 不同 display 属性,以超小屏幕(xs)为例,可用 .visible-*-* 类是

    14.6K30

    宝, 来学习一下CSS宽高比,让 h5 开发更想你夜!

    图像其他响应式元素宽度高度之间有一个一致比例是很重要。在CSS,我们使用padding hack已经很多年了,但现在我们在CSS中有了原生长宽比支持。...它有助于设计师创建一个图像大小清晰指南,这样开发者就可以在开发过程处理它们。 计算宽高比 为了测量宽高比,我们需要将宽度除以如下图所示高度宽度高度之间比例是1.33。...为了找出要使用百分比值,我们需要将图像高度除以宽度。得到数字就是我们要使用百分比。 假设图像宽度为260px,高度为195px。...注意到在中等尺寸下,固定高度图片左边右边被裁剪得太厉害,而在手机上,它们又太宽。所有这些都是由于使用了固定高度原因。我们可以通过不同媒体查询手动调整高度,但这不是一个实用解决方案。...有了这个,让我们探索原始纵横比可以有用一些用例,以及如何以逐步增强方法使用它。 渐进增强 我们可以通过使用CSS @supportsCSS变量来使用CSS aspect-ratio。

    1.6K30

    前端系列第3集-如何理解css盒子型?

    具体来说,我们通过指定 width height 属性来控制盒子宽度高度使用 padding 属性来指定内边距大小使用 border 属性来指定边框样式大小,以及使用 margin 属性来控制外边距大小...外边距 + 下外边距 如何调整盒子大小位置?...可以使用CSSbox-sizing属性来改变盒子模型计算方式。将box-sizing设置为border-box可以将内边距、边框外边距宽度高度计算到盒子宽度高度。...可以使用CSSoverflow属性来实现一个固定宽度高度盒子,里面的文本内容超出盒子大小时出现滚动条。...可以使用CSSmax-widthoverflow属性来实现一个自适应宽度固定高度盒子,里面的图片自适应宽度高度超过盒子大小时出现滚动条。

    24710

    waypoint_使用jQuery Waypoint创建粘性导航标题

    并将其项设置为display: inline-block ,以便将它们全部放在一行。...它们宽度为14px,高度为14px,并且距离nav底端absolute 14px。 如上所示, border-radius属性族可以为每个角取两个值。...它们宽度高度以及边界半径也使用百分比设置。...然后,我们将selected类导航栏所有链接删除,然后将其重新应用到其href属性与当前活动部分id对应类。 这工作得很好。...它带有两个参数-滚动目标包含不同选项对象,在这种情况下,这很容易解释。 单击链接href属性可以很好地用作滚动目标,并且用作顶部偏移表达式会将目标放置在视口高度15%处。

    3.3K30

    Jump Start Bootstrap 第4章

    在这里,请求是打开关闭下拉菜单。 让我展示一个如何使用这些事件例子。我已经写了下面的JQuery代码片段去监听所有的下拉插件状态,并打印每个事件触发时状态。 <!...按钮 在前面的章节,我们看到了如何创建各种类型按钮。这里,我们将看到使用BootstrapJavaScript插件如何在不同状态使用它们,并且让它们切换状态。...此外,您还必须在所有的这些按钮中都包含一个统一name属性值,从而在逻辑对这些按钮进行分组。在本例,我还将btn-default替换为btn-info,这将使按钮颜色灰色改为浅蓝色。...它可以放在文档任何位置。 Modals有三个宽度:大,默认,小。这些对于在模式对话框适当地填充内容非常有帮助。如果没有为modal-dialog元素提供额外类,它默认宽度是600px。...我们还学习了如何通过设置自定义data-*属性通过JavaScript来定制它们。当使用Bootstrap时,您应该始终使用内置插件,避免编写自定义插件。

    28.3K40

    看不完那种!前端170面试题+答案学习整理(良心制作)

    title属性是一个标记,它向每个元素添加补充信息。当鼠标指针放在元素时,主要作用是显示工具提示。 alt是为图片指定替代文字属性 alt是在中指定属性标签,表示图像。...正如我写为替代文本一样,它用于需要文本而不是图像情况。 如果盲人使用语音阅读功能,则会大声朗读图像alt属性文本。 当由于链接断开而无法显示图像时,将显示它。 GoogleYahoo!...113.使用jQuery动画 hide()show()可以同时修改多个样式属性,如高度宽度,不透明度。 fadeIn()fadeOut(),fadeTo()只能改变不透明度。...如何删除属性 jquery可以用attr()方法来获取设置元素属性,可以用removeAttr()方法来删除元素属性。...119.如何设置获取html以及文本使用html()方法,类似于innerHTML属性,可以用它读取或设置某个元素HTML内容。

    11.5K50

    前端面试题

    · 5.标明高度宽度(如果浏览器没有找到这两个参数,它需要一边下载图片一边计算大小,如果图片很多,浏览器需要不断地调整页面。这不但影响速度,也影响浏览体验。...当浏览器知道了高度宽度参数后,即使图片暂时无法显示,页面上也会腾出图片空位,然后继续加载后面的内容。从而加载时间快了,浏览体验也更好了。) · 6.减少http请求(合并文件,合并图片)。 2.... 其中media指定属性就是设备,显示器就是...Jquery.bind()、.live()、.delegate().on()之间区别详解 使用.bind()方法非常浪费性能因为它把同一个事件处理函数附加到了每一个匹配元素 你应该停止使用.live...在Jquery 1.7版本.bind(), .live().delegate()方法只需要使用.on()方法一种方式来调用它们

    1.6K10

    删除或失效WordPress文章图像大小属性

    这些属性会影响CSS宽度高度属性,图片延迟加载时默认图片大小,可通过 PHP、JavaScript CSS 来删除属性,或者使用其失效。...媒体库插入图像删除图像大小属性 删除图像大小属性可完全控制 CSS 属性,可将以下代码添加到主题 functions.php 文件: /*** 移除图片高度宽度属性文章内容图片*/ function...通过 jQuery 删除widthheight属性 对于已经添加到文章图像,必须手动删除widthheight属性,或者也可以使用一些jQuery代码来解决问题,以下代码添加到主题 js 文件:.../*直接删除图像大小属性*/ jQuery(document).ready(function($) { $('img').removeAttr('width').removeAttr...('height'); }); 使用 jQuery 代码删除图像大小属性更加方便,对于已经添加或者将来要添加图片都适用。

    2.5K40

    探索 JQuery EasyUI:构建简单易用前端页面

    每个区域都通过 data-options 属性指定了自己位置大小,从而实现了页面的布局效果。...3.2.1 主要属性title: 设置面板标题。iconCls: 设置面板标题前图标样式。width: 设置面板宽度。height: 设置面板高度。...width: 设置窗口宽度。height: 设置窗口高度。left: 设置窗口水平位置。top: 设置窗口垂直位置。resizable: 设置窗口是否可调整大小。...简单实践构建一个简单用户管理页面可以让我们演示如何使用 EasyUI 来创建常见用户界面,并实现基本数据展示操作功能。...5.2.3 后端接口在实际应用,我们通常需要通过后端接口数据库或其他数据源获取真实数据,然后将数据传递给前端页面进行图表展示。

    53010
    领券