根据需求来看,建议通过css的背景属性来设置;
第一步,先添加一个屏幕大小的DOM元素;
或者直接在你的imgsrc上设置,前提是imgsrc的大小是屏幕大小;
第二步:设置元素的css属性:
一楼说的是下面这种,不会拉伸图片;
通过调整background-position这个属性来控制图片位置,我也推荐这种写法:
background-image: url('链接');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
下面这种可以将图片完全展示出来,但会将拉伸背景图片,如果没有锁定屏幕,横屏时图片会被拉伸的比较严重:
background-image: url('链接');
background-size: 100% 100%;
===============================================
既不拉伸图片又要完全展示,真是执着于这个的话,给设计提个参考方案吧:
把图片的轮廓羽化后,加个背景色,再去拿到图片背景色的色值,在imgsrc或是加上的DOM元素中,设置css属性:
background-color: white;// 拿到的图片背景色
background-image: url('链接');
background-size: 95%; //可以写成固定值
background-repeat: no-repeat;
background-position: center;