关于图片背景拉升的问题，一直都会遇到，今天刚好又遇到了，所以整理了一下。
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>css3 让背景图片拉伸填充</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
</head>
<body>
<!--图片实际大小宽度100px,高度100px-->
<!--1、background-size:200px 200px;扩大背景图片的宽度200px,高度200px-->
<div style="height:200px;width:200px;border:1px solid red;background-image:url(images/33.jpg);background-size:200px 200px;">background-size:200px 200px;</div>
<br/>
<!--2、background-size:100% 50%;扩大背景图片为内容区域的宽度100%，高度50%-->
<div style="height:200px;width:200px;border:1px solid red;background-image:url(images/33.jpg);background-size:100% 50%;">background-size:100% 50%;</div>
<br/>
<!--3、background-size:cover;扩大图片的，使其宽度和高度都能放入内容区域-->
<div style="height:200px;width:200px;border:1px solid red;background-image:url(images/33.jpg);background-size:cover;">background-size:cover;</div>
<br/>
<!--4、background-size:contain;缩放图像的最大值，其宽度和高度都能放入内容区域-->
<div style="height:200px;width:200px;border:1px solid red;background-image:url(images/33.jpg);background-size:contain;">background-size:contain;</div>
<br/>
<!--5、background-size:auto;按照图片的实际大小平铺-->
<div style="height:200px;width:200px;border:1px solid red;background-image:url(images/33.jpg);background-size:auto;">background-size:auto;</div>
<br/>
</body>
</html>
扫一扫
1563
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
