作者：TaylorCoon译者：前端小智来源：在medium点赞再看，微信搜索【GreatMovetotheWorld】关注这个没有大厂背景，但有积极的态度。本文已收录到GitHubhttps://github.com/qq44924588...，文章已分类，也整理了很多我的文档和教程资料。大家都说简历里没项目可写，所以给大家找了一个项目，还给了一个【搭建教程】。如果有一天，你的老板给你发了一些帅气的照片，他希望能发布在公司自己的网站上，也希望能兼容其他终端。但是2个月后，他用手机打开网站，看到自己帅气的头像被压成一个小方块，或者压扁得不成比例，他微生气的告诉你（前端），给你半天时间，马上解决。如果你解决不了，我给你半天时间。对于刚入门的前端小伙伴来说，可能一周都解决不了，因为需要兼容所有终端。这个时候他该怎么办？这是一个适用于所有屏幕尺寸、所有卡片尺寸或任何其他用例的解决方案，让我们来看看这种一刀切的方法。默认行为是将图片导入到我们的组件中，然后放到页面上，下面是正常的默认情况：在不同的视口上，图片随着屏幕的变化而变化。不同的消费设备有超过10,000种不同的屏幕尺寸。手机小到360px宽。有5kimacs和4k电视。这么多尺寸，我们怎么适配图片呢？如何将封闭容器大写？我们可以将图片的wrapping元素大写，比如：.img-container{width:700px;高度：450px;}.image{宽度：100%;height:100%}这会比最初的好很多现在，图像不再随着视口的大小缩放，当视口变大时，图像只显示外围容器设置的大小。但是，如果视口太小，图像的底部会被截掉。此外，如果用户使用大屏幕，图像不会自动放大或缩小，因此最终设计中的图像可能太大或太小。CSS有一些内置功能可以帮助我们尝试另一种方法。无需将图片导入组件，直接在CSS文件中引用：background-image默认不会缩小图片以适应div大小，所以我们只能看到图片的左上角。CSS更多内置特性在CSS中，还有一些与background-image相关的选项：background-position:center告诉浏览器将图像居中放置在div上。background-size:cover这告诉浏览器自动缩小图像以适应div的大小。假设图片是从背景传来的，怎么办？如果图片是远程请求的，那么我们可以使用内联样式：这样也可以完美的使用css来解决图片定位和大小的问题。代码部署后可能存在的bug，无法实时获知。事后为了解决这些bug，花费了大量的时间在日志调试上。顺便推荐一个好用的bug监控工具Fundebug。原文：https://medium.com/dev-genius...每周更新交流文章。可以微信搜索【大千世界】第一时间阅读，回复【福利】还有很多前端视频等着你。本文GitHubhttps://github.com/qq449245884/xiaozhi已收录，欢迎Star。
