background-size属性contain,cover以及100%的区别详解

最新推荐文章于 2024-09-23 11:30:52 发布

Cwlojako

最新推荐文章于 2024-09-23 11:30:52 发布

阅读量1.7k

点赞数 3

文章标签： css3

本文链接：https://blog.csdn.net/weixin_40618068/article/details/103913325

版权

这里拿索大的图片来讲，图片大小是500*313
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>background-size</title>
</head>
<style type="text/css">
	.box{
		border: 5px solid red;
		width: 500px;
		height: 500px;
		background-image:url(images/op4.jpg);
	}
</style>
<body>
	<div class='box'></div>
</body>
</html>

例如我们想把这张照片作为一个500*500的div容器，直接设置background-image，由于默认是repeat重复，所以会是这样的效果。

在这里插入图片描述

想让图片单一的撑满盒子有2种方法
1.设置cover属性全覆盖

background-size: cover;

这种做法会使图片布满div盒子，但会使图片部分内容丢失，就好比是把图片从左上角往右下角拉伸放大直到布满盒子，其他部分就没办法显示出来。
在这里插入图片描述

2.设置图片大小相对于盒子的占比，即100%

background-size: 100% 100%;

这种做法跟cover的区别是图片内容不会丢失，但会导致图片变形
在这里插入图片描述

再说一下contain , contain实际上也是将图片放大，但跟cover的区别就是cover是宽和高都接触到边界就会停止，而contain是其中一边碰到边界就会停止，例如上面这个例子，div的宽度500刚好和照片宽度一样，所以设置contain是这样的效果（记得加上no-repeat），宽度到边界了，但高度没有到达边界。
在这里插入图片描述