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

jQuery计算来自服务器的img的实际高度/宽度值

要计算来自服务器的img元素的实际高度和宽度值,可以使用jQuery的height()width()方法。首先,需要确保img元素已经加载完毕并且已经获取了元素对象,然后使用height()width()方法获取实际的高度和宽度值,并赋值给相应的CSS属性,即可在网页中显示正确的高度和宽度。

下面是一个示例代码:

代码语言:javascript
复制
$(document).ready(function(){
    // 确保img元素已经加载完毕
    var img = $('.my-img');
    img.load(function(){
        // 获取元素对象并计算实际高度和宽度值
        var height = img.height();
        var width = img.width();
        // 将值赋给CSS属性,显示正确的高度和宽度
        img.css({'height': height + 'px', 'width': width + 'px'});
    });
});

注意,在上述代码中,$('.my-img')选择器可以选择需要计算实际高度和宽度值的img元素,load()事件监听器可以确保元素已经加载完毕,height()width()方法可以获取实际的高度和宽度值,最后将值赋给CSS属性即可在网页中显示正确的高度和宽度。

另外,如果需要实现自动计算图片实际大小,可以在img元素上添加一个data-original-src属性,将图片的原始地址存储在其中,然后在load()事件监听器中,通过$(this).attr('src')获取图片的原始地址,并使用img.load()方法监听图片的加载状态,在图片加载完毕后,使用img.attr('src', $(this).data('original-src'))将原始地址重新赋值给img元素的src属性,即可实现自动计算图片实际大小的功能。

需要注意的是,如果图片的原始地址不在服务器的HTTP响应中,那么需要将图片上传到服务器,并将上传后的地址存储在data-original-src属性中,否则将无法自动计算图片的实际大小。

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

相关·内容

JavaScript、Jquery获取屏幕宽度高度

在日常项目中经常需要获取屏幕宽度或者高度,简单记录一下: Javascript方法获取: document.body.clientWidth //网页可见区域宽 document.body.clientHeight... //屏幕分辨率宽 window.screen.availHeight //屏幕可用工作区高度 window.screen.availWidth //屏幕可用工作区宽度 JQuery方法获取: ($(...window).height()); //浏览器当前窗口可视区域高度 ($(document).height()); //浏览器当前窗口文档高度 ($(document.body).height())...;//浏览器当前窗口文档body高度 ($(document.body).outerHeight(true));//浏览器当前窗口文档body高度 包括border padding margin...;//浏览器当前窗口文档body宽度 ($(document.body).outerWidth(true));//浏览器当前窗口文档body宽度 包括border padding margin

5.3K00

img固定宽度高度,不规则图片变形问题解决方法

前端又要去做适应,是一个让人非常头大问题。 总结了一个不规则图片不变形解决方案: 注:先写一个长 300px 宽 200px 带边框 div ,图片接近方形,实现图片正常显示不变形。...2、object-fit object-fit CSS 属性指定可替换元素内容应该如何适应到其使用高度宽度确定框,不支持IE。...scale-down 当图片实际宽高小于所设置图片宽高时,显示效果与none一致;否则,显示效果与contain一致 inherit 继承 initial 默认 unset 继承父元素,若父元素没有属性则显示默认... = "100%";   } } 5、jQuery方法 也可以兼容多版本浏览器,需要 jQuery 加持。... {     max-height: 100%;     max-width: 100%; } 声明:本文由w3h5原创,转载请注明出处:《img固定宽度高度,不规则图片变形问题解决方法》 https

10.2K20
  • Ajax第三节

    瀑布流案例 封装jQuery瀑布流插件 思路分析 /** * 实现思路分析: * 1. 找到父容器, 获取父容器宽度 * 2....遍历子元素, 设置子元素位置 * * 初始化一个高度数组 arr = [0, 0, 0, 0, 0]; * * 第一行: * left: 索引...path 图片地址 text 文字 height 图片高度 width 图片宽度 同源与跨域 同源 同源策略基本概念 1995年,同源政策由 Netscape 公司引入浏览器。...比如实际开发过程中,往往都会把服务器端架设到一台甚至是一个集群服务器中,把客户端页面放到另外一个单独服务器。...在浏览器端,需要程序要声明一个全局函数,通过形参就可以获取到服务端返回对应 jsonp原理大家需要知道,但不用太过于去纠结这个原理,因为jquery已经帮我们封装好了,我们使用起来非常方便。

    1.4K20

    Bootstrap实战 - 瀑布流布局

    讲 Bootstrap 基础教程网上已经很多了,实际上 Bootstrap 中文网(bootcss.com)里文档已经写很详细了,但实战案例却不多。...2.1.3 因为 Bootstrap JS 插件是依赖 jQuery ,所以想用他 JS 插件必须先引入 jQuery ,然后再引入 JS 文件夹下 bootstrap.min.js。 <!...,看起来很不美观,我们瀑布流特点是宽度一致,高度自适应布局。...目前已经实现了宽度一致,要想实现高度自适应要用到 CSS3 中一个样式 column-width。 官方解释:设置或检索对象每列宽度,对应脚本特性为 columnWidth。...给容器加了 column-width 这个样式时,浏览器会给你计算容器里面的 应该显示多少列,计算一个相对合理布局方式。

    2.8K40

    jQuery实现图片懒加载

    懒加载原理就是先在页面中把所有的图片统一使用一张占位图进行占位,把正真的路径存在元素自定义属性“data-src”(这个名字起个自己认识好记就行)里,要用时候就取出来,把它赋值给imgsrc...二、获取屏幕高度jqueryheight()和javascriptheight 1、jquery各种高度 首先来说一说$(document)和$(window),如下: $(document)...在jQuery中,获取元素高度函数有3个,它们分别是height()、 innerHeight()、 outerHeight()。...获取滚动条滚动高度:document.documentElement.scrollTop 获取滚动条滚动高度: document.body.scrollTop 获取滚动条滚动宽度: document.body.scrollLeft...整个屏幕宽度): window.screen.width 屏幕可用工作区高度: window.screen.availHeight 屏幕可用工作区宽度: window.screen.availWidth

    13.6K20

    浅析瀑布流布局及其原理视频_jquery瀑布流布局

    二、实现原理 要做到每一张图片都根据上面的高度自动适应排列,那么我们就不能单纯地靠html+css布局了,需要用到js来帮助计算位置(其实用CSS3也能布局)。那么计算什么呢?...四、瀑布流核心 实现瀑布流核心其实就两个: 找出图片高度最小那一列,再那一列插入,然后继续找下一个高度最小,一直循环直到插满图片为止; 计算出每一列距离浏览器整体距离,也就是position里...=Math.floor(windowwidth/boxswidth); // 顺便计算得出容器宽度,让盒子居中 var wrapwidth=column*boxswidth; wrap.width(wrapwidth...,是指最小高度列距离窗口左边距离,相当于间接定位了这一列接下来要插入图片时,position定位left是多少 var leftvalue=boxes.eq(minindex).position(...).left; setStyle(boxes.eq(i),minheight,leftvalue,i) // 到这里已经插入了一张图片在最低高度列,接下来要改变arr里最低高度,让它继续下次遍历

    1.4K20

    面试简书(五)

    如百度上传插件Web Uploader、jQuery图片预览插件imgPreview 、拖拽上传与图像预览插件Dropzone.js等等,大家可根据项目实际需求选择适合插件。...方法一: js代码,以宽度为例: var img = $(.img); img.load(function(){ var imgW = img.width(); var screenW = $(window...background-size 各个属性 length设置背景图像高度宽度。...第一个设置宽度,第二个设置高度。 如果只设置一个,则第二个会被设置为 "auto"。percentage以父元素百分比来设置背景图像宽度高度。 第一个设置宽度,第二个设置高度。...contain把图像图像扩展至最大尺寸,以使其宽度高度完全适应内容区域。 前端中图片优化:https://www.jianshu.com/p/b55e951e9f03

    1.1K10

    SuperSlide轮播插件滚动高度宽度不对问题解决

    SuperSlide 是一款比较实用轮播插件,网站上常用“焦点图/幻灯片”“Tab标签切换”“图片滚动”“无缝滚动”等都能实现,兼容包括 IE6 绝大部分浏览器。...问题原因: 因为 SuperSlide 初始化后会自动计算(重置)li 宽度高度(左右滑动是宽度,上下滚动是高度)。所以 li 不能有 padding 属性和 border 属性。...注:有人说也不能有 margin ,博主试了一下,设置 margin 好像没什么问题。 我给所有元素设置了怪异盒模型结构 box-sizing: border-box; 所以出现上面的偏移问题。...{     width: 100%; } JS:     jQuery(".slideTxtBox").slide({         mainCell: ".bd ul",         ...left",         autoPlay: true,         vis: 3     }); 声明:本文由w3h5原创,转载请注明出处:《SuperSlide轮播插件滚动高度宽度不对问题解决

    2.3K20

    jQuery 动画函数 animate 模拟豌豆发射

    Paste_Image.png 动态效果: pea.gif 豌豆射手,草坪还有子弹都是现成图片,本文主要讲解jQueryanimate函数基本用法。 1. jQuery是库还是框架?...3.用animate函数改变盒子宽度高度 我们把alert去掉,加上下面的代码: $('#box').on('mouseover',function(){ $('#box').animate(...{width:600},500); }); 这表示当我把鼠标画上去时候,就改变宽度为600px,过渡时间为500毫秒。...12.gif 如果我们希望在宽度加倍后,令高度也加倍,又该如何做呢?...参加工作后对计算机感兴趣,深知初学编程之艰辛。 希望将自己所学记录下来,给初学者一点帮助。 免责声明: 博客中所有的图片素材均来自百度搜索,仅供学习交流,如有问题请联系我,侵立删,谢谢。

    1.4K90

    JQuery第三节

    多库共存 1. jQuery特殊属性操作 1.1. val方法 val方法用于设置和获取表单元素,例如input、textarea //设置 $("#name").val(“张三”); //获取值...1.3. width方法与height方法 设置或者获取高度 //带参数表示设置高度 $(“img”).height(200); //不带参数获取高度 $(“img”).height(); 获取网页可视区宽高...//获取可视区宽度 $(window).width(); //获取可视区高度 $(window).height(); 1.4. scrollTop与scrollLeft 设置或者获取垂直滚动条位置...//获取页面被卷曲高度 $(window).scrollTop(); //获取页面被卷曲宽度 $(window).scrollLeft(); 【案例:仿腾讯固定菜单栏案例】 【案例:小火箭返航案例...【案例:五角星评分案例.html】 3.2. each方法 jQuery隐式迭代会对所有的DOM对象设置相同,但是如果我们需要给每一个对象设置不同时候,就需要自己进行迭代了。

    80330

    零基础学网页开发入门(制作博客案例)适应手机端div+css+js综合介绍

    每个服务器网站服务,默认情况下把index为文件名文件作为一张网页首页。...3.图片标签 标签用来表示图片 src属性可以填写图片来源。 width可以表示图片宽度。 height可以表示图片高度。 如果只使用了width,那么高度会进行等比例缩放。...5.css选择器 css中对应html中标签属性对应关系: #对应id .对应class 标签名称对应实际标签 css中如何表示下一级选择器? 使用空格隔开。...jquery框架来辅助我们操作html中内容: 框架下载地址如下: http://jquery.com/ 使用jQuery框架控制html元素关键点: 1.必须先要加载jquery文件 2.使用标准格式...#mypic").attr("src","img/a (6).jpg") 对src进行设置 在js中: 使用var来声明变量。

    1.3K30

    如何把控css方向感

    padding-top/bottom 父元素设置高度 复制代码 空块级元素margin合并 3.margin合并计算规则 “正正取大”,”正负值相加”,”负负最负值” 4....深入理解margin:auto 如果一侧定,一侧auto,则auto为剩余空间大小 如果两侧均是auto,则平分剩余空间 触发margin:auto计算前提:width或height为定时,元素是具有自动填充特性...box内边缘 在PC端,默认滚动条均来自,PC端滚动高度可以用document.documentElement.scrollTop获取,在移动端用document.body.scrollTop获取 PC...,如果left/top/right/bottom为百分比单位,则计算尺寸是基于父元素 如果left/right 或top/bottom这些对立属性同时出现时,只有一个方向属性会生效,优先级与文档流顺序有关...撸一个单页/多页脚手架工具(支持jquery,react,vue,typescript) 欢迎加入前端技术群,一起探讨前端魅力

    1.2K10
    领券