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

$("#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. Noip模拟5 2021.6.7

    T1 string(线段树优化) 看到数据范围就必须要想到优化,那么如何把26×M∗N 的复杂度降低呢?? 用到那个我们最不想打的数据结构--线段树...... 然而,这个线段树与往常不同,他只需要用 ...

  2. STM32时钟系统之利用 systick 定时器来实现准确的延时。

    本篇文章带着大家来认识一下 STM32 的时钟系统,以及利用 systick 定时器来实现一个比较准确的延时. 我们首先从时钟说起,时钟在MCU中的作用,就好比于人类的心脏一样不可或缺.STM32 的 ...

  3. linux环境下redis安装(redis伪集群搭建)

    redis在linux环境下搭建 1.创建目录 [root@192 local]# mkdir /usr/local/redis 2.下载redis,并解压 [root@192 local]# wge ...

  4. 微服务之十四如何在 Ocelot 网关中配置多实例 Swagger 访问

    一.介绍 当我们开发基于微服务的应用程序的时候,有一个环节总是跳不过去的,那就是要创建 WebApi,然后,我们的应用程序基于 WebApi 接口去访问.在没有 Swagger 以前,我们开发好了 W ...

  5. Java学习笔记:GUI基础

    一:我们使用到的java GUI的API可以分为3种类: 组件类(component class) 容器类(container class) 辅助类(helper class) 1:组件类:组件类是用 ...

  6. 理解ASP.NET Core - 日志(Logging)

    注:本文隶属于<理解ASP.NET Core>系列文章,请查看置顶博客或点击此处查看全文目录 快速上手 添加日志提供程序 在文章主机(Host)中,讲到Host.CreateDefault ...

  7. Jmeter 运行结果的csv文件生成报告

    把运行结果保存到本地,下次可以直接用结果生成测试报告. 一.首先保证脚本能正常运行 二.本地创建csv文件,用来保存运行结果 三.察看结果树,选择本地文件(上一步创建好的csv文件),保存运行结果,如 ...

  8. Emmet语法 —— 快速生成HTML结构

    快速生成HTML结构语法 1.生成单个标签 : 标签名+tab,比如 div 然后tab 键, 就可以生成 <div></div> 2.生成多个相同标签 div*3 + tab ...

  9. 在 Node.js 中处理大 JSON 文件

    在 Node.js 中处理大 JSON 文件 场景描述 问题一: 假设现在有一个场景,有一个大的 JSON 文件,需要读取每一条数据经过处理之后输出到一个文件或生成报表数据,怎么能够流式的每次读取一条 ...

  10. Unity——技能系统(一)

    技能系统(一) 一.Demo展示 二.功能介绍 集成了技能,冷却,buff,UI显示,倒计时,动画等: 技能类型:弹道技能,动画事件根据帧数采用延迟调用技能,自定义释放位置(偏移,发射点两种),buf ...