在网站制作中如果后台上传的图片不做宽高限制,在前台显示的时候,经常会出现图片变形,实用下面方法可以让图片根据宽高自适应,不论是长图片或者高图片都可以完美显示。

$("#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中图片宽高自适应的更多相关文章

  1. css+background实现 图片宽高自适应,拉伸裁剪不变形

    图片宽高不固定 ,一样实现自适应,拉伸裁剪不变形,适应各大兼容性.  下面咱们在网上找两张宽高不一样的照片:     No.1                                      ...

  2. HTML5 图片宽高自适应,居中裁剪不失真

    一,使用 JS,先上效果图,右图为定死宽高的效果,左图为处理之后的 1, 主要思路是,在图片 onload 后,将图片的宽高比和 div 容器的宽高比进行比较, 2, 从而确定拉伸或者压缩之后是宽还是 ...

  3. JQuery通过URL获取图片宽高

    var img_url ='https://www.baidu.com/img/bd_logo1.png'; // 创建对象 var img = new Image(); // 改变图片的src im ...

  4. 从零开始学习前端开发 — 7、CSS宽高自适应

    一.宽度自适应 语法:width:100%; 注: a)块状元素的默认宽度为100% b) 当给元素设置宽度为100%时,继承父元素的宽度 c) 通常使用宽度自适应实现通栏效果 二.高度自适应 语法: ...

  5. php 图片上传的公共方法(按图片宽高缩放或原图)

    写的用于图片上传的公共方法类调用方法: $upload_name='pic';$type = 'logo_val';$file_name = 'logo_' . $user_id .create_st ...

  6. JS实现图片宽高的等比缩放

    关于图片宽高的等比缩放,其实需求就是让图片自适应父容器的宽高,并且是等比缩放图片,使图片不变形. 例如,需要实现如下的效果: 要实现上面的效果,需要知道图片的宽高,父容器的宽高,然后计算缩放后的宽高. ...

  7. 写个js动态调整图片宽高 (原创)

    <body style="TEXT-ALIGN: center;"> <div id="testID" style="backgro ...

  8. css3圆形头像(当图片宽高不相等时)

    1.图片宽高相等,width:300px: height:300px; 把他变成宽高100px的圆形头像 img{width:100px; height:100px; border-radius:50 ...

  9. JS快速获取图片宽高的方法

    快速获取图片的宽高其实是为了预先做好排版样式布局做准备,通过快速获取图片宽高的方法比onload方法要节省很多时间,甚至一分钟以上都有可能,并且这种方法适用主流浏览器包括IE低版本浏览器. 我们一步一 ...

随机推荐

  1. springcloud整合seata

    springcloud整合seata 一.背景 二.项目结构 三.实现功能: 四.项目使用到的技术 五.整合步骤 1.引入spring-cloud-starter-alibaba-seata jar包 ...

  2. 【做题记录】DP 杂题

    P2577 [ZJOI2004]午餐 $\texttt{solution}$ 想到贪心: 吃饭慢的先打饭节约时间, 所以先将人按吃饭时间从大到小排序. 状态: \(f[i][j]\) 表示前 \(i\ ...

  3. K8S_Kubernetes

    Google创造, K8S,是基于容器的集群管理平台, K8S集群   应用场景 微服务   这个集群主要包括两个部分 一个Master节点(主节点) 一群Node节点(计算节点)   Master节 ...

  4. 顺时针打印矩阵 牛客网 剑指Offer

    顺时针打印矩阵 牛客网 剑指Offer 题目描述 输入一个矩阵,按照从外向里以顺时针的顺序依次打印出每一个数字,例如,如果输入如下4 X 4矩阵: 1 2 3 4 5 6 7 8 9 10 11 12 ...

  5. word-ladder leetcoder C++

    Given two words (start and end), and a dictionary, find the length of shortest transformation sequen ...

  6. Codeforces Round #741 (Div. 2)部分题题解

    我果然还是太菜了,就写了两道题....真是水死了.... A The Miracle and the Sleeper 简化题意:给定\(l,r\),求\(a\)%\(b\)的最大值,其中\(r> ...

  7. hdu 5178 pairs(BC第一题,,方法不止一种,,我用lower_bound那种。。。)

    题意: X坐标上有n个数.JOHN想知道有多少对数满足:x[a]-x[b]<=k(题意给)[a<b] 思路: 额,,,直接看代码吧,,,, 代码: int T,n,k; int x[100 ...

  8. hdu 3863 No Gambling (不会证明,但是是对的,,)

    题意: N=4时 规则: 双方每次可以连接自己颜色的两个点(相邻,长度为1),线和线不能交叉重叠. 蓝方要连接左右,红方要连接上下. 蓝方先.问谁先连接? 思路: 经过观察....蓝方胜....... ...

  9. dns+nginx实现多虚拟主机

    借鉴于朋友的需求,公司需要启用域名访问内部的业务系统,现实情况是内部的业务系统目前使用的是单主机,单nginx多端口的方式再运行,朋友最终想实现启用域名方式问题,且域名不需要用户手工输入端口号 两种思 ...

  10. 2021.11.2-测试T1数独

    痛苦 题目 数 独 [问题描述] 给定一个9*9矩阵,对其进行几种操作,分别是插入,删除,合并,查询,输出 主要学到了一些特别的操作. (1)备份( 本蒟蒻第一次了解到) (2)对与数据的一些特别的改 ...