共计 1289 个字符,预计需要花费 4 分钟才能阅读完成。
作者:Taylor Coon
译者:前端小智
起源:medium
点赞再看,微信搜寻 【大迁世界】 关注这个没有大厂背景,但有着一股向上踊跃心态人。本文
GitHub
https://github.com/qq44924588… 上曾经收录,文章的已分类,也整顿了很多我的文档,和教程材料。
大家都说简历没我的项目写,我就帮大家找了一个我的项目,还附赠【搭建教程】。
如果有一天,你老板给你一些帅气照片,他心愿公布在公司本人网站下面,且心愿能兼容其它端。但 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
相干的选项:
background-position: center
通知浏览器将图像居中搁置在 div
上。
background-size: cover
这通知浏览器主动将图像放大以适宜 div
的大小。
假如图片是从后盾过去的,那又要怎么做?
如果图片是从近程申请过去的,那咱们能够应用内联款式:
这样也能完满用 css 的办法来解决图片定位,大小的问题。
代码部署后可能存在的 BUG 没法实时晓得,预先为了解决这些 BUG,花了大量的工夫进行 log 调试,这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。
原文:https://medium.com/dev-genius…
交换
文章每周继续更新,能够微信搜寻 【大迁世界】 第一工夫浏览,回复 【福利】 有多份前端视频等着你,本文 GitHub https://github.com/qq449245884/xiaozhi 曾经收录,欢送 Star。