效果:图片自动适应浏览器的大小,比较适合背景
这个很简单,但是本人一直好忘,就记下了。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>图片自适应</title>
<style type="text/css">
.logo {
background-image: url('img/logo.jpg');
background-size: 100%;
width: 100%;
padding-top: 29.8%;
height: 0;
text-indent: -9999px;
}
</style>
</head>
<body>
<h1 class="logo">超实用的CSS代码段</h1> 改变窗口大小试试
</body>
</html>