jquery操作html中图片宽高自适应
在网站制作中如果后台上传的图片不做宽高限制,在前台显示的时候,经常会出现图片变形,实用下面方法可以让图片根据宽高自适应,不论是长图片或者高图片都可以完美显示。
$("#myTab0_Content0 img").each(function(i){
var img = $(this);
var realWidth;//真实的宽度
var realHeight;//真实的高度
//这里做下说明,$("<img/>")这里是创建一个临时的img标签,类似js创建一个new Image()对象!
$("<img/>").attr("src", $(img).attr("src")).load(function() {
// 后台上传图片的真实宽高(像素)
realWidth = this.width;
realHeight = this.height;
//alert(realWidth)
//alert(realHeight)
// 样式定义的li的宽
var imgWcss = $('.mp5List li').width();
//alert(imgWcss);
// 标准的图片比例
var imgBz = 294/220;
// li高
var h = imgWcss/imgBz;
$('.mp5List li').css('height',h+'px');
//图片太高,高自动,宽固定
if( realWidth < realHeight){
$(img).css({'width':imgWcss+ 'px','height':'auto' });
// alert(imgWcss)
//alert(1);
}
//图片太宽,宽自动,高固定
if( realWidth > realHeight){
$(img).css({'height':h+'px', 'width':'auto' });
}
})
})
jquery操作html中图片宽高自适应的更多相关文章
- css+background实现 图片宽高自适应,拉伸裁剪不变形
图片宽高不固定 ,一样实现自适应,拉伸裁剪不变形,适应各大兼容性. 下面咱们在网上找两张宽高不一样的照片: No.1 ...
- HTML5 图片宽高自适应,居中裁剪不失真
一,使用 JS,先上效果图,右图为定死宽高的效果,左图为处理之后的 1, 主要思路是,在图片 onload 后,将图片的宽高比和 div 容器的宽高比进行比较, 2, 从而确定拉伸或者压缩之后是宽还是 ...
- JQuery通过URL获取图片宽高
var img_url ='https://www.baidu.com/img/bd_logo1.png'; // 创建对象 var img = new Image(); // 改变图片的src im ...
- 从零开始学习前端开发 — 7、CSS宽高自适应
一.宽度自适应 语法:width:100%; 注: a)块状元素的默认宽度为100% b) 当给元素设置宽度为100%时,继承父元素的宽度 c) 通常使用宽度自适应实现通栏效果 二.高度自适应 语法: ...
- php 图片上传的公共方法(按图片宽高缩放或原图)
写的用于图片上传的公共方法类调用方法: $upload_name='pic';$type = 'logo_val';$file_name = 'logo_' . $user_id .create_st ...
- JS实现图片宽高的等比缩放
关于图片宽高的等比缩放,其实需求就是让图片自适应父容器的宽高,并且是等比缩放图片,使图片不变形. 例如,需要实现如下的效果: 要实现上面的效果,需要知道图片的宽高,父容器的宽高,然后计算缩放后的宽高. ...
- 写个js动态调整图片宽高 (原创)
<body style="TEXT-ALIGN: center;"> <div id="testID" style="backgro ...
- css3圆形头像(当图片宽高不相等时)
1.图片宽高相等,width:300px: height:300px; 把他变成宽高100px的圆形头像 img{width:100px; height:100px; border-radius:50 ...
- JS快速获取图片宽高的方法
快速获取图片的宽高其实是为了预先做好排版样式布局做准备,通过快速获取图片宽高的方法比onload方法要节省很多时间,甚至一分钟以上都有可能,并且这种方法适用主流浏览器包括IE低版本浏览器. 我们一步一 ...
随机推荐
- [CPP] 类的内存布局
本文可以解决下面 3 个问题: 以不同方式继承之后,类的成员变量是如何分布的? 虚函数表及虚函数表指针,在可执行文件中的位置? 单一继承.多继承.虚拟继承之后,类的虚函数表的内容是如何变化的? 在这里 ...
- USART 硬件流控
流控的概念源于 RS232 这个标准,在 RS232 标准里面包含了串口.流控的定义.大家一定了解,RS232 中的"RS"是Recommend Standard 的缩写,即&qu ...
- 51nod_1003 阶乘后面0的数量(求N!中5的个数,数论)
题意: n的阶乘后面有多少个0? 6的阶乘 = 1*2*3*4*5*6 = 720,720后面有1个0. Input 一个数N(1 <= N <= 10^9) OutPut 输出0的数 ...
- cf13C Sequence(DP)
题意: N个数.a1...aN. 对于每个数而言,每一步只能加一或减一. 问最少总共需要多少步使得新序列是非递减序列. N (1 ≤ N ≤ 5000) 思路: *一个还不知道怎么证明的结论(待证): ...
- Typora简介
Typora是什么 Typora是一款支持实时预览的Markdown文本编辑器,拥有macOS.Windows.Linux三个平台的版本,并且完全免费. 下载地址:https://www.typora ...
- 【java+selenium3】线程休眠方法 (六)
一.线程休眠的方法 Thread -- sleep 调用方式: Thread.sleep(long millis) 建议:不推荐使用此方式来等待,因为元素的实际渲染时间未知,长时间的等待则浪费的时 ...
- 【Python+postman接口自动化测试】(2)什么是接口?
接口的概念 接口又称API(Application Programming Interface,应用程序编程接口),是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的 ...
- idea查看方法在哪里被调用
方法一 选中方法名,右键选择Find Usages 方法二 选中方法快捷键ctrl + alt + h查看Hierarchy Callers
- 【SVG】为了前端页面的美丽,我选择学习SVG
[SVG]为了前端页面的美丽,我选择学习SVG 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! 说明 SVG在之前自学的过程中, ...
- dart系列之:dart类中的构造函数
目录 简介 传统的构造函数 命名构造函数 构造函数的执行顺序 重定向构造函数 Constant构造函数 工厂构造函数 总结 简介 dart作为一种面向对象的语言,class是必不可少的.dart中所有 ...