Javascript防止图片拉伸的自适应处理方法


Posted in Javascript onDecember 26, 2017

前言

相信大家在日常的web开发中,作为前端经常会遇到处理图片拉伸问题的情况。

例如banner、图文列表、头像等所有和用户或客户自主操作图片上传的地方,而一旦牵扯图片,就会涉及到图片拉伸的问题,当然,在图片上传时做手动裁切,让用户或客户清晰的感知到图片的有效内容才是最优的解决方案,但是在其他各种外在因素下,没有做裁切的话,就需要在前端显示上做处理了,满足在上传任意大小图片的情况下,最优显示效果的需求。

这时我们需要考虑到极端效果,如下图:

Javascript防止图片拉伸的自适应处理方法

而我们想要得到的效果是这样的------

Javascript防止图片拉伸的自适应处理方法

把图片放进框框,要几步?三步...我们开始

第一步:先画个框框 (这里顺便安利一种自适应框框的方法)

// 假定需要一个在750px屏幕下宽400px,高280px的盒子
// 宽度 = 400 / 750 = 0.5333
// 高度 = 280 / 400 * 0.5333 = 0.3733
<style>
 .img-box{
  position: relative;
  width: 53.33%;
  height: 0;
  padding-bottom: 37.33%;
  overflow: hidden;
  background-color: #eee;
 }
</style>

<body>
 <div id="list">
  <div class="img-box">
   <img src="..."/>
  </div>
 </div>
</body>

第二步:设置图片需要使用到的css

<style>
 .width{
  position: absolute !important;
  width: 100% !important;
  min-height: 100% !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  -ms-transform: translateY(-50%) !important;
  -moz-transform: translateY(-50%) !important;
  -webkit-transform: translateY(-50%) !important;
  -o-transform: translateY(-50%) !important;
  display: block;
 }
 .height{
  position: absolute !important;
  height: 100% !important;
  min-width: 100% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  -ms-transform: translateX(-50%) !important;
  -moz-transform: translateX(-50%) !important;
  -webkit-transform: translateX(-50%) !important;
  -o-transform: translateX(-50%) !important;
  display: block;
 }
</style>

第三步:js获取图片高度比较并给img添加类名

//需要注意的是,不能在css中直接给img设置宽度和高度
//否则在img.onload后获取的宽高是css设置的宽高
//同时建议使用dom对象来获取img标签
<script>
 var list = document.getElementById('list');
 getImgWH ( list );
 //执行宽高比对并设置img类名
 function getImgWH ( Obj ) {
  var img = Obj.getElementsByTagName('img');
  for( var i=0 ; i<img.length ; i++ ){
   img[i].onload = function(){
    var width = this.width;
    var height = this.height;
    if ( width > height ) {
     this.classList.add('height');
    } else if ( width < height ) {
     this.classList.add('width');
    } else {
     this.style.width = '100%';
     this.style.height = '100%';
    }
   }
  }
 }
</script>

图片防止拉伸处理比较简单,但是在实际项目中需要得到足够的重视,一个web页面成也图片,败也图片,拉伸了图片就等着设计师的磨叽吧,哈哈哈哈...

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
javascript实现了照片拖拽点击置顶的照片墙代码
Apr 03 Javascript
jQuery javascript获得网页的高度与宽度的实现代码
Apr 26 Javascript
在JavaScript中调用Java类和接口的方法
Sep 07 Javascript
Bootstrap在线电子商务网站实战项目5
Oct 14 Javascript
javascript过滤数组重复元素的实现方法
May 03 Javascript
vue实现点击图片放大效果
Aug 15 Javascript
浅谈AngularJS中使用$resource(已更新)
Sep 14 Javascript
Three.js实现浏览器变动时进行自适应的方法
Sep 26 Javascript
javascript function(函数类型)使用与注意事项小结
Jun 10 Javascript
微信小程序canvas绘制圆角base64图片的实现
Aug 18 Javascript
在Vue中使用CSS3实现内容无缝滚动的示例代码
Nov 27 Vue.js
js实现圆形菜单选择器
Dec 03 Javascript
Vue工程模板文件 webpack打包配置方法
Dec 26 #Javascript
微信小程序出现wx.navigateTo页面不跳转问题的解决方法
Dec 26 #Javascript
Webpack实战加载SVG的方法
Dec 26 #Javascript
vue学习教程之带你一步步详细解析vue-cli
Dec 26 #Javascript
基于vue-cli配置lib-flexible + rem实现移动端自适应
Dec 26 #Javascript
基于 flexible 的 Vue 组件:Toast -- 显示框效果
Dec 26 #Javascript
细说webpack源码之compile流程-rules参数处理技巧(2)
Dec 26 #Javascript
You might like
PHP判断文件是否被引入的方法get_included_files用法示例
2016/11/29 PHP
PHP数组式访问接口ArrayAccess用法分析
2017/12/28 PHP
浅谈PHP进程管理
2019/03/08 PHP
PHP中上传文件打印错误错误类型分析
2019/04/14 PHP
用js实现上传图片前的预览(TX的面试题)
2007/08/14 Javascript
Ext.FormPanel 提交和 Ext.Ajax.request 异步提交函数的区别
2009/11/12 Javascript
JavaScript中清空数组的三种方法分享
2011/04/07 Javascript
简短几句jquery代码的实现一个图片向上滚动切换
2011/09/02 Javascript
多种方式实现JS调用后台方法进行数据交互
2013/08/20 Javascript
jQuery Ajax异步处理Json数据详解
2013/11/05 Javascript
jQuery实现高亮显示的方法
2015/03/10 Javascript
页面get请求 中文参数方法乱码问题的快速解决方法
2016/05/31 Javascript
js检测离开或刷新页面时表单数据是否更改的方法
2016/08/02 Javascript
使用PBFunc在Powerbuilder中支付宝当面付款功能
2016/10/01 Javascript
javascript实现复选框全选或反选
2017/02/04 Javascript
Bootstrap.css与layDate日期选择样式起冲突的解决办法
2017/04/07 Javascript
vue 粒子特效的示例代码
2017/09/19 Javascript
jQuery中each方法的使用详解
2018/03/18 jQuery
vue中的watch监听数据变化及watch中各属性的详解
2018/09/11 Javascript
优雅地使用loading(推荐)
2019/04/20 Javascript
浅谈layui分页控件field参数接收对象的问题
2019/09/20 Javascript
原生js实现贪吃蛇游戏
2020/10/26 Javascript
vue实现一个获取按键展示快捷键效果的Input组件
2021/01/13 Vue.js
[03:57]《不朽》——2015DOTA2国际邀请赛—中国军团出征主题曲MV
2015/07/15 DOTA
[01:03:09]完美世界DOTA2联赛PWL S2 Forest vs SZ 第二场 11.25
2020/11/26 DOTA
用Django写天气预报查询网站
2018/10/21 Python
python3 pillow模块实现简单验证码
2019/10/31 Python
FOREO官方网站:LUNA露娜洁面仪
2016/11/28 全球购物
国家地理在线商店:Shop National Geographic
2018/06/30 全球购物
与C++相比,Java中的数组有什么不同
2014/03/25 面试题
这76道Java面试题及答案,祝你能成功通过面试
2016/04/16 面试题
现金出纳岗位职责
2014/03/15 职场文书
技术比武方案
2014/05/19 职场文书
高中综合实践活动总结
2014/07/07 职场文书
模范教师事迹材料
2014/12/16 职场文书
HTML+CSS 实现顶部导航栏菜单制作
2021/06/03 HTML / CSS