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

html-css015

css怎么让一张图片适应任何屏幕大小的电脑平铺?,第1张

下面是图片不失真但不保证是否完全铺满(留有空隙或者超出屏幕)的css代码:

1、横向铺满,纵向留有空隙或超出屏幕:

body {background:url(图片路径) no-repeat centerbackground-size:100% auto}

2、纵向铺满,横向留有空隙或超出屏幕:

body {background:url(图片路径) no-repeat centerbackground-size:auto 100%}

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

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

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

1.目前台式电脑与笔记本适配测试数据以下为参考数值:

台式机和笔记本电脑的分辨率:2560x1440 1920x1200 1680x1050 1600x1200 1440x900 1366x768 1280x1024 1280x800 1280x768 1152x864 1024x768 800x600

平板电脑分辨率:iPad( 768x1024 )iPad Pro(1024x1366)Nexus 10(800x1280) Nexus 7(600x960)---显示都是不完整的

智能手机分辨率:Nexus 5(360x598) Nexus 5x(412x684) iPhone 6 Plus(414x736) iPhone 6(375x667) iPhone 5(320x568) iPhone 4(320x480)------显示都是不完整的

2.突然出现滚动条禁止屏幕抖动:

body {

padding-right: calc(100vw - 100%)

}

3.更改(美化)滚动条样式:

//滚动条整体部分

::-webkit-scrollbar {

width: 6px

height: 6px

background-color: transparent

}

//滚动条轨道部分

::-webkit-scrollbar-track {

background-color: transparent

}

//滚动条滑块部分

::-webkit-scrollbar-thumb {

border-radius: 3px

background-image: linear-gradient(135deg, #09f, #3c9)

}

4.自动识别文本换行

7.页面暗黑模式:

html{

filter: invert(1) hue-rotate(180deg)

}

8.页面悼念(全灰)模式:

html{

filter: grayscale(1)

}

9.两端文本对齐

text-align-last:justify

10.禁用效果

pointer-events:none

11.aspect-ratio维持图片长宽比

aspect-ratio:1/1

12.clamp() 实现页面的响应式

clamp() 的工作原理是“夹紧”或限制一个灵活的值,使其处于最小和最大范围之间

img {

width: clamp(15vw, 800%, 100%)

}

h1 {

font-size: clamp(20px, 5vw, 35px)

}

实现div占满整个屏幕

1)通过css高度100%,但是要div的父级元素高度为100%

前提:以知父级元素并且父级元素高度可控

2)通过100vh

前提:适合移动端或者不用兼容IE的项目

3)使用定位拉伸