css-backgrund-size

最新推荐文章于 2023-12-11 17:28:41 发布

startyangu

最新推荐文章于 2023-12-11 17:28:41 发布

阅读量433

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/startyangu/article/details/81869137

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

backgrund-size

共有四个值

值	m描述
length	s设置背景图片的高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个设置为auto（自动）
percentage	将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"auto(自动)"
cover	此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
contain	此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。

css

.imgsize{
	background:url(../img/car.jpg);
	background-size:cover;
	background-repeat:no-repeat;
	background-position: center center;
	border: 1px solid red;
	width: 300px;
	height: 150px;
}

.imgsize-2{
	background:url(../img/car-2.jpg);
	background-size:cover;
	background-repeat:no-repeat;
	background-position: center center;
	border: 1px solid red;
	width: 300px;
	height: 150px;
}

.imgsizecontian{
	background:url(../img/car.jpg);
	background-size:contain;
	background-repeat:no-repeat;
	background-position: center center;
	border: 1px solid red;
	width: 300px;
	height: 150px;
}

.imgsizelength{
	background:url(../img/car.jpg);
	background-size:lenght;
	background-repeat:no-repeat;
	background-position: center center;
	border: 1px solid red;
	width: 300px;
	height: 150px;
}

 .imgsizeborder{
	width: 300px;
	height: 150px;
	float: left;
	margin-right: 20px;
}
.clear{
	clear:both;
}

html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>background-size</title> 
 <link href="./css/common.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p>
Lorem ipsum，中文又称“乱数假文”， 是指一篇常用于排版设计领域的拉丁文文章 ，主要的目的为测试文章或文字在不同字型、版型下看起来的效果。
</p>

<p>原始图片: <img src="./img/car.jpg"  ></p>
<div class="imgsizeborder">
<a href="http://www.baidu.com">
	<div class="imgsize"></div>
</a>
</div>

<div class="imgsizeborder">
<a href="http://www.baidu.com">
	<div class="imgsize-2"></div>
</a>
</div>


<div class="imgsizeborder">
<a href="http://www.taobao.com">
	<div class="imgsizecontian"></div>
</a>
</div>

<div class="imgsizeborder">
<a href="http://www.taobao.com">
	<div class="imgsizelength"></div>
</a>
</div>

 

<div class="clear">
</br></br></br></br>
</body>
</html>

效果