<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
figure{
width: min-content;
max-width: 300px; /* 给浏览器一个回退样式 */
margin: auto;
}
figure >img{
max-width: inherit;
}
</style>
</head>
<body>
<div >
<p> this is a photo this is a photo this is a photo this is a photo this is a photo this is a photo this is a photo this is a photo this is a photo this is a photo this is a photo this is a photo this is a photo this is a photo</p>
<figure class="content">
<img src="https://img-blog.csdn.net/20160914112338724?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="sishi">
<figcaption>this is a photo this is a photo this is a photo this is a photo this is a photo this is a photo this is a photo</figcaption>
</figure>
</div>
</body>
</html>
使用css 关键字
min-content，使图片和底下的文字一样宽；
若使用 display： inline-block, 上方的文字会塌下来；
转载请注明原文地址: https://ju.6miu.com/read-1123728.html
