CSS 实现背景图片设置响应式自适应全屏展示

最新推荐文章于 2023-06-01 13:57:33 发布

Amazon Translator

最新推荐文章于 2023-06-01 13:57:33 发布

阅读量1.5k

点赞数

分类专栏： CSS HTML 文章标签： css css3

本文链接：https://blog.csdn.net/qq_45140694/article/details/118089673

版权

HTML 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

CSS

12 篇文章 0 订阅

订阅专栏

img标签设置响应式自适应全屏展示

- 最终效果
- 最终代码

最终效果

网页缩放到25%
网页放大到500%
由此图可以看到无论网页缩放与放大网页都不会影响到这张图片的尺寸。

在放最终代码之前注意：图片建议一定要大于显示器屏幕，建议为1000左右甚至更高。（如果是小于屏幕的情况下把图片铺满屏幕会出现图片变形的情况）

最终代码

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
</head>
<style type="text/css">
	*{
		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;
		}
	}
</style>
<body>
	<div id="bg"></div>
</body>
</html>

Amazon Translator

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS 实现背景图片设置响应式自适应全屏展示

img标签设置响应式自适应全屏展示最终效果最终代码最终效果由此图可以看到无论网页缩放与放大网页都不会影响到这张图片的尺寸。在放最终代码之前注意：图片建议一定要大于显示器屏幕，建议为1000左右甚至更高。（如果是小于屏幕的情况下把图片铺满屏幕会出现图片变形的情况）最终代码<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport"
复制链接

扫一扫