css怎么实现跨屏幕图片满屏

Question

我想用css实现一张图片实现所有屏幕满屏(背景图实现满屏或者img标签满屏都可以)，而且不能出现拉伸效果，不知道有什么好方案。

1.background-size: cover;虽然能满屏，但是会有局部看不见

note:请教各路大神支招，小弟不胜感激。

Answer 1

html,body{
   width:100%;
   height:100%;
   background:url("****") no-repeat top center scroll;
   background-size:100% 100% ;
   -webkit-background-size：100% 100%;
   -ms-background-size：100% 100%;
   -o-background-size：100% 100%;
   -moz-background-size：100% 100%;
}

Answer 2

请准确描述你的问题

background-size: 100% 100%

Answer 3

又要铺满，又要不变形，还要完整展现，我也是笑了，这明显跟图片本身比例就有必然关系呀。如果比例不一，铺满肯定会变形，要不变形完整展示，那肯定又铺不满了。

Answer 4

图片足够大就行 1920*1920

Answer 5

你最好是用边缘可溢出 background-size: cover; 不然无法做到跨屏满屏，或者说你愿意做各个分辨率相对应大小的背景图

Answer 6

html,body{
   width:100%;
   height:100%;
   background-image:url("****");
   background-size:100% 100%
}

Answer 7

可以试试 background-size: contain; 另外可以看下模拟 background-size 样式开发整屏页面

Answer 8

问题描述的有点模糊，最好上一下代码，根据你描述的，直接 background-size:100% 100% ; 就可以铺满。
如果是用img标签的话 直接 width:100%;height:100%; 不过如果图片过小，在大屏中会变形，所以在图片尺寸上最好拿捏一下

Answer 9

问题有点矛盾

Answer 10

鱼和熊掌不可兼得，肯定得取舍下。