移动端怎么样让图片宽高比例正好适应手机当前屏幕全屏大小？

45

发布于2017-04-27

✓已被采纳

根据需求来看，建议通过css的背景属性来设置；

第一步，先添加一个屏幕大小的DOM元素；

或者直接在你的上设置，前提是的大小是屏幕大小；

第二步：设置元素的css属性：

一楼说的是下面这种，不会拉伸图片；

通过调整-这个属性来控制图片位置，我也推荐这种写法：

-('链接');-;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;