<!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>
In this way, when the width and height of our page are not in line with the ratio of the width and height of the image, the effect of incomplete image display due to rigid straight stretching will not occur.