首页  |  数字信息资讯  |  数字信息化  |  数字信息平台  |  数字信息技术  |  数字信息发展  |  数字信息查询 

 
当前位置: 数字信息查询网 > 数字信息查询 > 正文

ae07e82b234fdab6883f7f00ea1fc417.jpg-wh_651x-s_2404918203.jpg

假如有一天,你老板给你一些帅气照片,他希望发布在公司自己网站上面,且希望能兼容其它端。 但2个月后,他在手机上打开网站,看到他的帅气图像被压成一个小盒子,或者图像被不成比例地压扁,他略微生气跟你(前端)说,给你半天的时间,立马解决。如果解决不了,那在给你半天的时间。

对于刚入门的不久的前端小伙伴可能给他一个礼拜也解决不了,因为要兼容所有的端,这时候他要怎么办呢?这里有一种方案,可以解决所有屏幕大小、所有卡片大小或任何其他用例上的问题,我们来看看这个万能的方法。

默认行为

将图像导入到我们的组件中,然后将其放在页面上,下面是正常默认的情况:

在不同的视口上,图片随着屏幕的变化而变化。在不同的消费设备上有超过10,000种不同的屏幕尺寸。有小到360px宽的手机。有5k台imac,也有 4k电视,这么多尺寸,我们要怎么去适配图片呢?

把外围容器的大小写死怎么样?

我们可以将图片的包裹元素的大小写死,

这会比刚开始的好的多了,图像不再随视口的大小进行缩放,视口变大的时候,图片也只显示外围容器设置的大小。 但是,如果视口太小,则会切除图像的底部。

另外,如果用户使用的是大屏幕,则该图像不会自动按比例放大或缩小,因此生成的设计中的图像可能太大或太小。


关闭窗口
· 2020 Linux网络监控工具 09-18
· Spring Security 中如何细化 09-18
· 一次解决你的图像尺寸和 09-18
· 当今溢价最高的13个IT技 09-18
· 针对Linux发起攻击的14个 09-18
· SMTP工作原理大剖析 09-18
· 多线程必考的「生产者 09-16
· 华为被曝自研编程语言“ 09-16
· 透视HTTPS建造固若金汤的 09-16
· RPA和分析协同工作的9种 09-16
本站文章点击TOP
· 数字21点技 2015-12-14
· 政府定制版 2016-03-30
· Forrester:发 2016-06-01
· 699元手机也 2016-06-19
· 践行大众创 2017-01-01
· 2016网智会 2017-01-10

辽ICP备11011476号-8 版权所有
ICP备案号:辽ICP备11011476号-8