<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } .wrap { margin: 50px; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 300px; height: 600px; border: 1px solid red; } .wrap div { width: 100%; flex: 1; border: 1px solid red; color: #000; } .wrap .top { position: relative; } .inner { position: absolute; inset: 0; border: 1px solid red; } .wrap .top img { width: 100%; height: 100%; /* default */ object-fit: fill; } .wrap .middle { background: url(./search-button.png); background-position: top; background-repeat: repeat-y; background-size: cover; } </style> </head> <body> <div class="wrap"> <div class="top"> <!-- 自动匹配容器 宽高 - 需要设定外层容器 --> <div class="inner"> <img src="./search-button.png" alt=""> </div> </div> <div class="middle">middle</div> <div class="bottom"><img src="./search-button.png" alt=""></div> </div> </body> </html>
标签:匹配,top,宽高,width,自动,background,wrap,border,red From: https://www.cnblogs.com/justSmile2/p/17909814.html