如果有一天，你的老板给你发了一些帅气的照片，他希望能发布在公司自己的网站上，也希望能兼容其他终端。但是2个月后，他用手机打开网站，看到自己帅气的头像被压成一个小方块，或者压扁得不成比例，他微生气的告诉你（前端），给你半天时间，马上解决。如果你解决不了，我给你半天时间。对于刚入门的前端小伙伴来说，可能一周都解决不了，因为他需要兼容所有终端。这个时候他该怎么办？这里有一个解决方案，可以解决所有屏幕尺寸、所有卡片尺寸或任何其他用例的问题，让我们来看看这个通用的方法。默认行为是将图片导入到我们的组件中，然后放到页面上，下面是正常的默认情况：在不同的视口上，图片随着屏幕的变化而变化。不同的消费设备有超过10,000种不同的屏幕尺寸。手机小到360px宽。有5kimacs和4k电视。有这么多尺寸，我们如何调整图像？如何利用外部容器？我们可以把图片的wrapping元素大写，比如：.img-container{width:700px;height:450px;}.image{width:100%;height:100%}这样会比开始的时候好很多，image将不再随视口的大小缩放，视口会变大有时，图片只显示周围容器设置的大小。但是，如果视口太小，图像的底部会被截掉。此外，如果用户使用大屏幕，图像不会自动放大或缩小，因此最终设计中的图像可能太大或太小。CSS有一些内置功能可以帮助我们尝试另一种方法。组件中不需要导入图片，在css文件中引用即可：本文转载自微信公众号「大运世界」，可通过以下二维码关注。转载本文请联系大千世界公众号。
