一次解决你的图像尺寸和定位问题。
作者:Taylor Coon
译者:前端小智
来源:medium
点赞再看,微信搜索 【大迁世界】 关注这个没有大厂背景,但有着一股向上积极心态人。本文
GitHub
https://github.com/qq449245884/xiaozhi 上已经收录,文章的已分类,也整理了很多我的文档,和教程资料。
大家都说简历没项目写,我就帮大家找了一个项目,还附赠【搭建教程】。
假如有一天,你老板给你一些帅气照片,他希望发布在公司自己网站上面,且希望能兼容其它端。 但2个月后,他在手机上打开网站,看到他的帅气图像被压成一个小盒子,或者图像被不成比例地压扁,他略微生气跟你(前端)说,给你半天的时间,立马解决。如果解决不了,那在给你半天的时间。
对于刚入门的不久的前端小伙伴可能给他一个礼拜也解决不了,因为要兼容所有的端,这时候他要怎么办呢?这里有一种方案,可以解决所有屏幕大小、所有卡片大小或任何其他用例上的问题,我们来看看这个万能的方法。
默认行为
将图像导入到我们的组件中,然后将其放在页面上,下面是正常默认的情况:
在不同的视口上,图片随着屏幕的变化而变化。在不同的消费设备上有超过10,000种不同的屏幕尺寸。有小到360px
宽的手机。有5k台imac,也有 4k电视,这么多尺寸,我们要怎么去适配图片呢?
把外围容器的大小写死怎么样?
我们可以将图片的包裹元素的大小写死,如:
.img-container {width: 700px;height: 450px;
}.image{width: 100%;height: 100%
}
这会比刚开始的好的多了,图像不再随视口的大小进行缩放,视口变大的时候,图片也只显示外围容器设置的大小。 但是,如果视口太小,则会切除图像的底部。
另外,如果用户使用的是大屏幕,则该图像不会自动按比例放大或缩小,因此生成的设计中的图像可能太大或太小。
CSS有一些内置的特性来帮助我们
我们来试试另一种方法。不需要将图像导入到组件中,直接在CSS文件中引用它:
background-image
默认情况下不会将图像缩小以适应div
大小,因此我们只能看到图像的左上角。
CSS 更多的内置特性
在CSS中, 还有一些 background-image
相关的选项:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Pgvodu4g-1600300756826)(/img/bVbOHBx)]
background-position: center
告诉浏览器将图像居中放置在div
上。
background-size: cover
这告诉浏览器自动将图像缩小以适合div
的大小。
假设图片是从后台过来的,那又要怎么做?
如果图片是从远程请求过来的,那我们可以使用内联样式:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7KCMuoKz-1600300756830)(/img/bVbOHBR)]
这样也能完美用 css 的方法来解决图片定位,大小的问题。
代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。
原文:https://medium.com/dev-genius/solve-your-image-sizing-and-positioning-problems-forever-7859e24118ce
文章每周持续更新,可以微信搜索 【大迁世界 】 第一时间阅读,回复 【福利】 有多份前端视频等着你,本文 GitHub https://github.com/qq449245884/xiaozhi 已经收录,欢迎Star。
一次解决你的图像尺寸和定位问题。相关推荐
- 窗口缩小 怎么让定位的盒子不动_一次解决你的图像尺寸和定位问题
假如有一天,你老板给你一些帅气照片,他希望发布在公司自己网站上面,且希望能兼容其它端. 但2个月后,他在手机上打开网站,看到他的帅气图像被压成一个小盒子,或者图像被不成比例地压扁,他略微生气跟你(前端 ...
- PS改变图像尺寸和分辨率保存为tif图片颜色变成黑色-解决办法
论文投稿时改变图像尺寸和分辨率将其保存为tif格式,发现图片背景变为黑色: 例如:原图在ps中打开显示为这样: 设置图片大小和分辨率后: 点击保存为: 选中格式为tif格式: tif选项选择默认不变的 ...
- 手机屏幕的分辨率和图像尺寸关系
手机屏幕的分辨率 320*480 ,图像尺寸72*72,正常显示. 在 240*320 的屏幕分辨率下,图像尺寸是多少(缩放比率是多少)才会正常显示(不失真,不模糊)? 一般比你手机屏幕大的都没事,但 ...
- PS 图像尺寸|点阵格式图像|矢量格式图像|图像格式的选择
一.图像尺寸 像素作为图像的一种尺寸,只存在于电脑中,如同RGB色彩模式一样只存在于电脑中. 像素是一种虚拟的单位,现实生活中是没有像素这个单位的. 传统长度单位:毫米.厘米.分米.米.公里.光年. ...
- 【Android 内存优化】Bitmap 图像尺寸缩小 ( 考虑像素密度、针对从不同像素密度资源中解码对应的 Bitmap 对象 | inDensity | inTargetDensity )
文章目录 一.像素密度对解码图片的影响 二.不考虑像素密度会导致图片缩小尺寸不准确 三.DisplayMetrics 源码阅读.研究手机资源获取规则 四.像素密度参数设置取值 ( inDensity ...
- 【Android 内存优化】Bitmap 图像尺寸缩小 ( 设置 Options 参数 | inJustDecodeBounds | inSampleSize | 工具类实现 )
文章目录 一.解码图片参数 inJustDecodeBounds 二.计算图片的缩小比例 三.设置图片缩小配置 inSampleSize 四.设置图片像素格式 inPreferredConfig 五. ...
- 图片头顶距离顶部百分比怎么修改_PS中,新手该怎么修改图像尺寸?看老师傅们都采用哪些方法?...
关于昨天学习到的在PS中打开文件,大家应该和我一样大概已经学习到了,那么今天要学习的是通过PS,如何修改图像的尺寸?大家不要觉得很简单哦,因为这里面还包含很多的小细节,足以证明了PS的强大之处,下面就 ...
- 如何解决模具折弯尺寸不稳定?
如何解决模具折弯尺寸不稳定? 在我们生产模具的时候,时常会有些角度内偏.角度外偏等这些折弯件尺寸不良的局面.角度内偏的这种状况出现的较少(如图),一般都为角度外偏的状况. 一般出现角度内偏的这种情况, ...
- 图解卷积前后图像尺寸的关系
1.步长1,无填充时图像卷积前后的尺寸关系(图1) 输入尺寸: 输出尺寸: 卷积核: 不填充时,卷积会导致处理后的图像 尺寸变小 图1 步长1,无填充时卷积前后的尺寸关系 2.步长1, ...
最新文章
- 80C51单片机的最小系统
- numpy 创建加一行_NumPy数据处理的可视化
- T-SQL RAND()
- windows开启smnp服务
- Java基础知识之循环语句(for循环、while循环)
- ospf多区域路由实验
- QTP的那些事--weblist中相关的内容获取
- 沟通CTBS助华盛集团实现财务集中管理
- 陈希孺概率与数统:入门级自学佳作
- Android H5交互实现拍照显示
- 就业、养老、住房、出行等领域稳步前行 这一年,民生改善实实在在
- JQuery注册登录
- markdown和marktop是啥关系?
- 单击Artwork时没有弹窗的问题
- c语言模仿atm源代码,C语言ATM程序模拟
- sudo,,sudo-i ,,su的区别
- PHP输出图像imagegif、imagejpeg与imagepng函数用法
- 大脑的默认模式网络DMN
- 云计算:SaaS、PaaS、IaaS、CaaS并不神秘
- Oracle AWR管理与维护
热门文章
- win10系统更新服务器不可用,Win10专业版系统 RPC服务器不可用怎么办
- 仿新版QQ底部导航栏动态拖动按钮
- python numpy 获得数组的行和列(三种方法)
- 一个简单的小游戏——“数字炸弹”的实现
- 七夕活动运营,社交游戏类应用如何做好商品管理
- python3自学之路作业 选课系统
- 啃下这三块最难啃的硬骨头,你将在嵌入式C语言中大放异彩
- Linux相关命令及软件安装教程
- android sqlite fts4,在Sqlite中创建动态FTS4表
- 华为手机相册怎么镜像翻转_屏幕镜像怎么用?搭配这款软件,苹果手机投屏一点也不难...