<!DOCTYPE html>
<html>
<head>
<title>测试用例</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="assets/css/common/common.css">
<link rel="stylesheet" type="text/css" href="assets/css/demo.css">
<style>
/*背景图片contain和cover区别*/
.img-container-one{
width:400px;
padding-top:400px;
background:url("assets/images/flower.gif");
background-size:contain;
border:1px solid red;
}
/*背景图片大小设置为contain时为在显示适应该块大小的最大图片*/
/*此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。*/
/*背景图片大小设置为contain时为在显示适应该块大小的最大图片*/ /*此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。*/ .img-container-two{ width:400px; padding-top:400px; background:url("assets/images/flower.gif"); background-size:cover; border:1px solid red; } /*背景图片大小设置为cover时为在显示覆盖该块大小的最小图片*/ /*网站:此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。*/ </style> </head> <body> <div class="img-container-one"> </div> <div class="img-container-two"> </div> </body> <script src="assets/js/demo.js"></script></html>