<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="JS/jquery1.10.2.min.js"></script>
<style type="text/css">
*{
margin: 0px; padding: 0px; }
.Show{
position: absolute; display: flex; flex-direction: column; background-color: red; flex: 1;
width: 100%; height: 100%; background: url(Img/zb001.jpg) no-repeat; background-size:100% 100%; background-attachment:fixed;
}
</style>
</head>
<body>
<div class="Show" ></div>
</body>
</html>
这样我们的页面在宽度和高度不符合图片宽高比例的情况下，不会出现硬直拉伸导致图片显示不全的效果。