<!doctype html>
<head>
<title>
background-size的用法
</title>
<meta charset="utf-8">
<style>
.bsize1{
width: 400px;
height: 200px;
background: url("photo.jpg")no-repeat;/*不平铺*/
border:1px solid red;
overflow: hidden;
}
.bsize2 {
background-size: 400px 200px;
}
.bsize3 {
background-size: 400px;
}
.bsize4 {
background-size: 100% 100%;/*该属性是以父元素的百分比来设置图片的宽度和高度的，第一个值是宽度，第二个值是高度。如果只设置一个值，那么第二个值会被设置为 “auto”;*/
}
.bsize5{
background-size: 100%;
}
.cover{
background-size: cover;/*把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。*/
}
.contain{
background-size: contain;/* 把图像扩展至最大尺寸，以使宽度和高度 完全适应内容区域。*/
}
.cover-paddingTop {
position: relative;
padding-top: 50%;
overflow: hidden;
}
.cover-paddingTop img{
width:100%;
position: absolute;
top:0;
}
</style>
</head>
<body>
<h3>原图</h3>
<div>
<img src="photo.jpg" width="100%">
</div>
<hr><hr>
<h3>固定宽度400，高度200</h3>
<div>
<div class="bsize1"></div>
</div>
<hr><hr>
<h3>固定宽度400，高度200，用background-size：400px 200px进行缩放</h3>
<div>
<div class=" bsize1 bsize2"></div>
</div>
<hr><hr>
<h3>固定宽度400，高度200，用background-size：400px 进行缩放</h3>
<div>
<div class=" bsize1 bsize3"></div>
</div>
<hr><hr>
<h3>固定宽度400，高度200，用background-size：100% 100% 进行缩放</h3>
<div>
<div class=" bsize1 bsize4"></div>
</div>
<hr><hr>
<h3>固定宽度400，高度200，用background-size：100% 进行缩放</h3>
<div>
<div class=" bsize1 bsize5"></div>
</div>
<hr><hr>
<h3>使用属性cover来设置背景图片</h3>
<div>
<div class=" bsize1 cover"></div>
</div>
<hr><hr>
<h3>使用contain来设置背景图片</h3>
<div>
<div class=" bsize1 contain"></div>
</div>
<hr><hr>
<h3>给图片设置属性宽度为100%的情况下，可自适应图片<h3>
<div class="bsiz-padding"><img src="photo.jpg" width="100%"/></div>
<hr><hr>
<h3>图片自适应问题，图片宽度设置100%，页面加载时会存在高度塌陷的问题</h3>
<p>可以使用padding－top来设置百分比值来实现自适应 padding-top = (图片的高度/图片的宽度)*100</p>
<div class="cover-paddingTop">
<img src="photo.jpg"/>
</div>
<hr><hr>
</body>
浙公网安备 33010602011771号