巧用img的width和height属性进行缩图，使图片不变形
做过web开发的哥们都会遇到要显示图片的情况。有时候在页面上因为布局的限制，所以需要限制图片显示的尺寸（即缩图显示）。
有如下几种情况：
1：要求图片以某个宽度显示，比如150. 则可以这样指定<img src="图片路径" width="150">
这样可以保证图片显示的宽度为150，而高度也会以等比例显示，最终显示的图片也不会变形。
2：同理要求以某个高度显示，比如150，这同样可以这样指定<img src="图片路径" heigh="150">
这样可以保证图片显示的高度为150，而宽度也会以等比例显示，最终显示的图片也不会变形。
3：要求图片以某个宽度和高度显示，比如150*150.
如果是动态页面，则很好办，可以事先在动态代码中算出缩图后的宽度和高度的，然后指定这个最接近的属性，就行了。
比如原始图片是1024*800的，则缩图因子=7（取1024/150和800/150的值中大的）。根据缩图因子得到原图缩图后是147*115.而缩图后的宽度是147，更接近要求的宽度150（缩图后的高度是115，相对要求的高度150差距较大）。所以可以这样指定<img src="图片路径" width="150">， 这样图片也不会变形，也保证了高度不会超过150。
当然，有人会说通过在img标签的onload事件处理缩图。这样也可以，但对于不同的浏览器，会得到不同的结果。在ie中，由于存在缓存，所以通过onload事件往往不起作用。除非加上防止缓存的代码！
巧用img的width和height属性进行缩图，使图片不变形相关推荐
- H5 canvas的 width、height 与style中宽高的区别
Canvas 的width height属性 1.当使用width height属性时,显示正常不会被拉伸:如下 <canvas id="mycanvas" width=&q ...
- html5 canvas 自动改变宽高,H5 canvas中width、height和style的宽高区别详解
前言 最近在学习canvas属性中遇到一个小问题,就是canvas的width和height,通过查找相关的资料终于解决,所以下面将解决的过程分享出来给大家,下面话不多说了,来一起看看详细的介绍吧 C ...
- javascript 中的各种width,height属性整理
目标: 理清js及jquery的各种width和height 对象: Window对象表示浏览器中打开的窗口:window对象可以省略.比如alert().window.alert(). Docume ...
- 创建一个Rectangle类。 添加两个属性width、height，分别表示宽度和高度，添加计算矩形的周长和面积的方法。测试输出一个矩形的周长和面积。
[Java]创建一个Rectangle类 添加两个属性width.height,分别表示宽度和高度,添加计算矩形的周长和面积的方法.测试输出一个矩形的周长和面积. /*作者:龙蝶 *日期:2020年4 ...
- web前端入门到实战：CSS属性width和height
width 是定义元素内容区的宽度: height是定义元素在内容区的高度. 在内容区外面可以增加内边距(padding).边框(border)和外边距(margin),这样的话就成了我们常说的盒子模 ...
- VB窗体width、height、scalewidth、scaleheith属性（全网最容易理解）
width.height表示窗体的实际大小,什么是实际大小,比如现实中一块木板,是多长多宽就是多长多宽,这两个属性就是表示窗体的实际长宽. scalewidth.scaleheith表示的是你认为的大 ...
- div高度、宽度100% div width、height 100%
正像你所知道的那样,设置DIV大小的有两个属性width和height,以前在学习DIV每次给DIV设置100%宽度或高度时都很迷惑,不明确这个100%的宽度(高度)到底有多宽有多高?这个100%是从 ...
- php width,canvas定义width、height的正确用法
现在前端代码书写习惯,一般都会遵循标签结构与样式分离的写法,即一般不添加标签属性来控制页面元素显示效果,而通过 或引用css文件来实现! 但使用Canvas时,也采用同样的方式来处理,却会产生一个让人 ...
- width 、 height 与 box-sizing : border-box ,content-box 的关系
默认 width .height的 content-box 的宽高. box-sizing 经常用来设置 width.height指定的区域 box-sizing 经常用做一些自适应的布局. 语法: ...
最新文章
- linux 下使用crontab 定时打包日志并删除已被打包的日志
- 从上海到旧金山，2021 LiveVideoStackCon回归上海
- 比机器人更优越的半机械昆虫，颜控党们会接受吗？
- linux 安装nvm ，管理多版本nodejs
- 【科普向】5G核心网架构和关键技术
- php 豆瓣抓取,PHP抓取豆瓣读书爬虫代码
- linux该专接本还是工作_专升本还是继续工作?
- A/C加权的matlab实现
- mysql 重做日志原理_Oracle恢复内部原理（重做日志）
- 有关与windows的一些资料以及链接（一）
- 无法打开包括文件: “ocl_macros.h”: No such file or directory
- jvm的类加载和运行时数据区和垃圾回收
- 在线生成favorite ico的网站
- 莆田学院c语言怎么查成绩,莆田学院教务管理系统成绩查询、网上选课查分登录入口...
- 软考高级信息系统项目管理师如何备考？
- python中bttext什么意思_Python实现解析Bit Torrent种子文件内容的方法
- 给大家介绍一个PDF图书下载网站，还有TXT图书下载
- STM32F4的DSP库
- C++课程总结——数论
- SAP MM 物料主数据-物料版次-基础应用