缩放背景图片 css (1)

📌 相关文章

📜 缩放背景图片 css (1)

📅 最后修改于: 2023-12-03 15:27:38.497000 🧑 作者: Mango

缩放背景图片 CSS

CSS中的背景图像可以附加到任何元素中。使用 'background-size' 属性可以调整背景图片的大小，以适应不同大小的屏幕。

语法

background-size: length|percentage|cover|contain|initial|inherit;

length: 指定背景图片的宽度和高度（如 50px 30px）
percentage: 指定背景图片的宽度和高度相对于其容器的百分比（如 50% 30%）
cover: 让背景图片完全覆盖其容器，可能导致图片的一部分被剪裁
contain: 让背景图片完全适应其容器，可能会在容器周围留下空白
initial: 设置属性为其默认值
inherit: 从父元素继承属性值

示例

<!DOCTYPE html>
<html>
<head>
	<title>背景图片缩放 CSS</title>
	<style>
		.container {
			background-image: url("example.jpg");
			background-size: contain;
			background-repeat: no-repeat;
			background-position: center;
			width: 50%;
			height: 400px;
			margin: auto;
		}
	</style>
</head>
<body>
	<div class="container"></div>
</body>
</html>

解释

上面的示例将背景图片设置为 'example.jpg'，然后使用 'contain' 属性值将其缩放，使其完全适合容器。同时，将 'background-repeat' 属性设置为 'no-repeat'，防止背景图片重复。使用 'background-position' 属性将背景图片在容器内居中对齐。最后，设置容器的宽度为50%，高度为400px，并将容器居中。这将在其父元素内呈现一个自适应的背景图片。

运行结果

result