扫码关注官方订阅号
我想用css实现一张图片实现所有屏幕满屏(背景图实现满屏或者img标签满屏都可以),而且不能出现拉伸效果,不知道有什么好方案。
1.background-size: cover;虽然能满屏,但是会有局部看不见
note:请教各路大神支招,小弟不胜感激。
小伙看你根骨奇佳,潜力无限,来学PHP伐。
请准确描述你的问题
background-size: 100% 100%
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%; }
图片足够大就行 1920*1920
你最好是用边缘可溢出 background-size: cover; 不然无法做到跨屏满屏,或者说你愿意做各个分辨率相对应大小的背景图
html,body{ width:100%; height:100%; background-image:url("****"); background-size:100% 100% }
可以试试 background-size: contain; 另外可以看下模拟 background-size 样式开发整屏页面
background-size: contain;
问题描述的有点模糊,最好上一下代码,根据你描述的,直接 background-size:100% 100% ; 就可以铺满。如果是用img标签的话 直接 width:100%;height:100%; 不过如果图片过小,在大屏中会变形,所以在图片尺寸上最好拿捏一下
问题有点矛盾
又要铺满,又要不变形,还要完整展现,我也是笑了,这明显跟图片本身比例就有必然关系呀。如果比例不一,铺满肯定会变形,要不变形完整展示,那肯定又铺不满了。
鱼和熊掌不可兼得,肯定得取舍下。
微信扫码关注PHP中文网服务号
QQ扫码加入技术交流群
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
PHP学习
技术支持
返回顶部
请准确描述你的问题
图片足够大就行 1920*1920
你最好是用边缘可溢出 background-size: cover; 不然无法做到跨屏满屏,或者说你愿意做各个分辨率相对应大小的背景图
可以试试
background-size: contain;另外可以看下模拟 background-size 样式开发整屏页面问题描述的有点模糊,最好上一下代码,根据你描述的,直接 background-size:100% 100% ; 就可以铺满。
如果是用img标签的话 直接 width:100%;height:100%; 不过如果图片过小,在大屏中会变形,所以在图片尺寸上最好拿捏一下
问题有点矛盾
又要铺满,又要不变形,还要完整展现,我也是笑了,这明显跟图片本身比例就有必然关系呀。如果比例不一,铺满肯定会变形,要不变形完整展示,那肯定又铺不满了。
鱼和熊掌不可兼得,肯定得取舍下。