背景撑开盒子: 盒子里只放一张图片, 盒子的宽度固定, 盒子的高度由图片决定, 图片铺满盒子且不变形, 不裁切, 不重复; 实现方式有: after 和: before 两种, 代码略有差异.
1, 简单实现
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- <style>
- * {
- padding: 0;
- margin: 0;
- }
- .outer {
- border:10px green dashed;
- width: 500px; /* 盒子的宽度固定, 也可以是百分比 */
- margin: 0 auto;
- background-size: 100%;
- background-repeat: no-repeat;
- background-image: url(http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12227263_12227263_1441518066203_mthumb.jpg);
- }
- .outer:after {
- content: ""; /*padding-top 已经占据了整个盒子的高度, 所以这里不能有任何内容, 否则内容会下移到盒子外下方 */
- display: block;
- padding-top: 66.67%; /*66.67%= 图片的高 / 宽; 盒子的高度由图片决定 */
- }
- p {
- text-align: center;
- }
- </style>
- </head>
- <body>
- <p > 以下: after 实现 </p>
- <div class="outer"></div>
- </body>
- </html>
2, 复杂实现
CSS 代码
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- <style>
- *{
- padding:0;
- margin:0;
- }
- .outer{
- border:10px green dashed;
- width:500px;/* 盒子的宽度固定, 也可以是百分比 */
- margin: 0 auto;
- }
- .innerA{
- background-size: 100%;
- background-repeat: no-repeat;
- background-image: url(http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12227263_12227263_1441518066203_mthumb.jpg);
- }
- .innerA:after{
- content: "";/*padding-top 已经占据了整个盒子的高度, 所以这里不能有任何内容, 否则内容会下移到盒子外下方 */
- display: block;
- padding-top: 66.67%;/*66.67%= 图片的高 / 宽; 盒子的高度由图片决定 */
- }
- .innerB{
- background-size: 100%;
- background-repeat: no-repeat;
- background-image: url(http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12227263_12227263_1441518066203_mthumb.jpg);
- }
- .innerB:before{
- content: "";/*padding-top 已经占据了整个盒子的高度, 所以这里不能有任何内容, 否则内容会下移到盒子外下方 */
- display: block;
- padding-top: 66.67%;/*66.67%= 图片的高 / 宽; 盒子的高度由图片决定 */
- }
- p{
- text-align:center;
- }
- </style>
- </head>
- <body>
- <p > 以下: after 实现 </p>
- <div class="outer">
- <div class="innerA"><!--padding-top 已经占据了整个盒子的高度, 所以这里不能有任何内容, 否则盒子外下方的内容会下移 --></div>
- </div>
- <p > 以下: before 实现 </p>
- <div class="outer">
- <div class="innerB"><!--padding-top 已经占据了整个盒子的高度, 所以这里不能有任何内容, 否则内容也会下移到盒子外下方 --></div>
- </div>
- </body>
- </html>
来源: http://www.qdfuns.com/article/40901/d506fa72ba2a717c510f94b8ae873717.html