CSS 实现背景图片 设置响应式自适应全屏展示 |
您所在的位置：网站首页 › 背景铺满css › CSS 实现背景图片 设置响应式自适应全屏展示 |
CSS 实现背景图片 设置响应式自适应全屏展示
|
img标签 设置响应式自适应全屏展示
最终效果最终代码
最终效果
在放最终代码之前注意：图片建议一定要大于显示器屏幕，建议为1000左右甚至更高。（如果是小于屏幕的情况下把图片铺满屏幕会出现图片变形的情况） 最终代码 *{ margin: 0; padding: 0; } #bg{ background-image: url('./我是一张1920x1000的图片.jpg'); /* background-size: cover; 缩放背景图片以完全覆盖背景区，可能背景图片部分看不见。和 contain 值相反，cover 值尽可能大的缩放背景图像并保持图像的宽高比例（图像不会被压扁）。该背景图以它的全部宽或者高覆盖所在容器。当容器和背景图大小不同时，背景图的 左/右 或者 上/下 部分会被裁剪。 */ background-size: cover; /* 背景图片不重复 */ background-repeat: no-repeat; /* 最小宽度为100% */ min-width: 100%; /* 最小高度为100vh vh: 就等于 视窗的高度 1vh = 视窗的高度的1%*/ min-height: 100vh; } /* 因为图片屏幕宽度的变化，可能图片的内容会被遮挡，这时我们可以通过媒体查询的方式来控制响应式 */ /* 下面只是一个展示，具体根据自己的图片进行设置，屏幕宽度到什么尺寸遮挡 发送什么变化 */ /* background-size: contain; 缩放背景图片以完全装入背景区，可能背景区部分空白。contain 尽可能的缩放背景并保持图像的宽高比例（图像不会被压缩）。该背景图会填充所在的容器。当背景图和容器的大小的不同时，容器的空白区域（上/下或者左/右）会显示由 background-color 设置的背景颜色。 意思就是自适应图片，图片随着屏幕的宽度而做出调整 */ /* 媒体查询 */ /* 当屏幕小于1500px的时候 */ @media screen and (max-width: 1500px){ /* 当屏幕小于1500px的时候 id为bg的元素 进行改变 */ #bg{ background-size: contain; } } |
由此图可以看到无论网页缩放与放大网页都不会影响到这张图片的尺寸。【本文地址】
今日新闻 |
推荐新闻 |