自适应内部元素

需求：figure元素能和它包含的图片一样宽，即内容根据图片自适应。

未自适应的效果：

文字比图片要宽得多

未适应.png

想要的理想效果：

文字根据图片自适应

自适应.png

解决方案：

①给figure设置一个min-content(容器内部元素最宽的单词、图片或具有固定宽度的盒元素=最终容器的宽度);
②为兼容旧版本浏览器，需要提供一个max-width;

figure{
    max-width:300px;
    max-width:min-content;
}
figure >img{
    max-width:inherit;
}

注意：现代浏览器后一条max-width会覆盖前一条,如figure尺寸是有内部因素决定的，第二条 max-width:inherit;不会生效。

具体代码：

HTML:

//HTML
<div>
        <figure>
            <img src="../img/cat2.jpg" alt="">
            <figcaption>
                The great Sir Adam Catlace was named after Countess Ada Lovelace, the first programmer ever.
            </figcaption>
        </figure>
    </div>

CSS:

 * {
            margin: 0;
            padding: 0;
        }

        figure {
            padding: 10px;
            border: 1px solid silver;
            margin: auto;
            margin-top: 20px;
            /* 自适应 */
            max-width: 300px;
            width: min-content;
        }

        figure>img {
            max-width: inherit;
        }

• 这里需要用到css3自适应的关键字之一：min-content
• 如果想了解css3其他关键字或加深对min-content的理解，可阅读我记录的这篇：css3自适应4个关键字

这边是根据《css揭秘》总结的一个应用场景，供学习使用！