CSS使用min-content自适应内部元素

难题

众所周知,如果不给元素一个具体的height,它就会自动适应内容的高度。假如我们希望width也具有同样的类似行为,该怎么做呢?如下:

<p>Cat</p>
<figure> 
<img src="http://upload-images.jianshu.io/upload_images/1673685-29a5a721f5b3d5ad.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" >
<figcaption> 深闺驯绕闲时节,卧花茵,香团白雪,爪位湘裙,回身欲捕,绣成双蝶</figcaption>
</figure>
<p>Cat</p>

假如给它添加一个边框,效果效果如下图:

初始效果

那么我们怎么能够使这个figure元素能和它所包含的图片一样宽,而且还是水平居中的呢?
目前可以想到的实现方式:

  • <figure>元素浮动会使它得到正确的宽度,但同时改变了它的布局模式,这往往会导致我们不想要的结果,如下图:
浮动情况
  • figure应用display: inline-block ,宽度计算与预期一致(如下图),但是无法完成水平居中的任务,我们还要对其父元素进行text-align: center,然后对父元素的所有子元素都设置一边text-align: left.
display:inline-block
  • 最后,我们可能会对figure应用固定的widthmax-width,然后figure > img应用max-width:100%,可是这种方法无法充分的利用有效空间,对于过小的图片来说,布局效果很差,更不要说响应式了。

解决方案

min-content:这个关键字将解析为这个容器内部最大的不可短行元素高度(即最宽的单词、图片或具有固定宽度的盒元素)
现在我们可以用两行CSS代码就可以把figure设置为恰当的宽度,并让它水平居中

figure {
      max-width: min-content;
      margin: auto;
}

效果如下图


min-content最终效果

下面为完整的代码,提供了旧版浏览器平稳回退的样式

figure { 
       max-width: 300px;
       max-width: min-content;
       margin: auto;
}
figure > img {
       max-width: inherit;
 }
figure { 
        padding: 10px;
        border: 1px solid silver;
}

对于现代浏览器来说,后一条max-width声明会覆盖前一条。如果figure的尺寸是由内部因素决定时,第二条规则中的max-width:inherit就不会生效了


除了min-content,还有max-contentfit-content
max-content: 它的行为类似于我们之前看到的display: inline-block;说白了就是假设我们的容器有足够的宽度,足够的空间,此时,所占据的宽度是就是max-content所表示的尺寸。如下图

max-content
fit-content:width: 和CSS2.1中的float,absolute,inline-block的尺寸收缩表现是一样的。

我们不禁会想,既然fit-contentfloat有一样的表现,为什么还会定义新的关键字呢?
以水平居中效果举例,首先浮动float不能实现,因为它只可以左浮动和右浮动;绝对定位不占据空间,无法在普通文档流中应用,而inline-block需要父级使用text-align:center,而本身可能还需要text-align:left才可以实现水平居中该效果,依旧很繁琐。
width:fit-content可以没有这些烦恼,因为,width:fit-content可以实现元素收缩效果的同时,保持原本的block水平状态,于是,就可以直接使用margin:auto
实现元素向内自适应同时的居中效果了,如下图:

fit-content效果

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 8,528评论 1 85
  • 假设我们有一个两栏自适应的布局,在主内容中应用了一个图片,其结构如下: 这是一个很常见的结构,其效果就是一张图片,...
    抱着熊喵啃什么阅读 1,517评论 0 4
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 625评论 0 2
  • 今天目标:说和善的话。儿子放学后不做作业,我温柔地问他原因,保持语气的平静。儿子告诉我他暂时不想做。我没有吭声,问...
    兰草心阅读 21评论 0 0
  • 肖盈漠阅读 23评论 2 2