css怎么让一张图片不失真的适应任何屏幕大小的电脑平铺?

2024年11月29日 09:34

有5个网友回答

网友（1）：

下面是图片不失真但不保证是否完全铺满（留有空隙或者超出屏幕）的css代码：
1、横向铺满，纵向留有空隙或超出屏幕：
body {background:url(图片路径) no-repeat center; background-size:100% auto;}
2、纵向铺满，横向留有空隙或超出屏幕：
body {background:url(图片路径) no-repeat center; background-size:auto 100%;}
补充说明：background-size属于css3，只有支持css3的浏览器才有效。

电脑（Computer）是一种利用电子学原理根据一系列指令来对数据进行处理的机器。电脑可以分为两部分：软件系统和硬件系统。第一台电脑是1946年2月15日在美国宾夕法尼亚大学诞生的ENIAC通用电子计算机。

人们把没有安装任何软件的计算机称为裸机。随着科技的发展，现在新出现一些新型计算机有：生物计算机、光子计算机、量子计算机等。

网友（2）：

单张图片“铺满屏幕”与“不失真”之间是矛盾的，铺满屏幕就必然会使图片的长宽比例发生变化造成失真，除非图片的长宽比例刚好与屏幕的长宽比例完全一致。
下面是铺满屏幕但不保证是否失真的css代码：
body {background:url(图片路径) no-repeat; background-size:100% 100%;}
下面是图片不失真但不保证是否完全铺满（留有空隙或者超出屏幕）的css代码：
1、横向铺满，纵向留有空隙或超出屏幕：
body {background:url(图片路径) no-repeat center; background-size:100% auto;}
2、纵向铺满，横向留有空隙或超出屏幕：
body {background:url(图片路径) no-repeat center; background-size:auto 100%;}

补充说明：background-size属于css3，只有支持css3的浏览器才有效。

网友（3）：

不失真代表屏幕大小不能超过图片的原大小，这不可能；顶多实现宽高比不改变

网友（4）：

用svg格式的图片就可以

网友（5）：

image-rendering: -webkit-optimize-contrast;
百度上的答案大多数都是废话，老子看到就一把火