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

Riddler 发布于2019-08-01 18:16 / 1603人阅读

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

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

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

把图片放进框框，要几步？三步...我们开始

第一步：先画个框框 （这里顺便安利一种自适应框框的方法）

//  假定需要一个在750px屏幕下宽400px，高280px的盒子
//  宽度 = 400 / 750 = 0.5333
//  高度 = 280 / 400 * 0.5333 = 0.3733

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

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

//需要注意的是，不能在css中直接给img设置宽度和高度
//否则在img.onload后获取的宽高是css设置的宽高
//同时建议使用dom对象来获取img标签

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/51621.html

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

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

mingzhong 2019-08-29 14:06 评论0 收藏0
防止图片拉伸的自适应处理

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

warkiz 2019-08-21 18:23 评论0 收藏0
移动端适配问题

摘要：读设备宽度，动态设置标签的属性中的值网易的做法网易的做法现在的设计稿都是宽度的宽，那要想实现样式设计图这种比较方便的折算方式，就要设置成也就是说总结总结是为了实现移动端自适应布局。适配问题怎么适配iphone6 1px问题为什么页面与设计稿会出现偏差？ dpr=设备像素/ css像素，只有dpr等于1的时候，实际效果和设计稿的尺寸比例才是1:1。因为iPhone6的DPR（设备像素比）...

孙淑建 2019-04-23 13:23 评论0 收藏0
微信小程序新单位rpx与自适应布局

摘要：布局上面四个方法，各有优缺点，现在回头看看微信的，相信大家已经有所启发，实际上就是系统级的把页面按比例分割份，，或者伸缩布局的。也就是说，微信小程序的布局帮大家把布局的设置根元素字体尺寸这步省了，或者减少了伸缩布局不能开启的问题。 rpx是微信小程序新推出的一个单位，按官方的定义，rpx可以根据屏幕宽度进行自适应，在rpx出现之前，web页面的自适应布局已经有了多种解决方案，为什么微信...

LeviDing 2019-08-29 11:27 评论0 收藏0