<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>背景图撑开盒子高度</title> <style> .bg-box { background-image: url(../demo.jpg); background-size: 100% 100%; background-repeat: no-repeat; margin:0 auto; } .bg-box::after { content: ""; display: block; /*这里的padding = height / width*/ padding:20%; } </style> </head> <body> <div class="bg-box"></div> </body> </html>