关于vue.js:一次解决你的图像尺寸和定位问题

作者：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 文件中援用它：

background-image默认状况下不会将图像放大以适应 div 大小，因而咱们只能看到图像的左上角。

在 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。

默认行为