使用min-content实现自适应的内部元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <base target="_blank" /> <title>三十客 - 使用min-content实现自适应的内部元素</title> <style> figure { border: 2px solid black; background: #cae9b8; margin: 0; max-width : 300px; max-width: min-content; max-width: -webkit-min-content; max-width: -moz-min-content; } figure > img { max-width: inherit; } figcaption , p { text-align: center; margin: 1rem; } figcaption { font-weight: bolder; font-size: 1.2rem; } </style> </head> <body> <div class="container"> <figure> <img src="http://res.30ke.cn/u/1/201808/o4iaq1g8nr.jpg" /> <figcaption>www.30ke.cn</figcaption> <p>三十客 - 一个专注于前端学习和分享的网站,热情42度记录生活点滴。</p> </figure> </div> </body> </html>