css background-image 高度自适应_每天一个CSS小技巧

大家都知道如果不给一个元素设定一个具体的height，它就会自动适应其内容的高度。但是如果我们希望width也有类似的行为，我们该怎么做呢？

下面是我们实际的HTML：

Let’s assume we have some text here. Bacon ipsum dolor sit amet turkey veniam shankle, culpa short ribs kevin t-bone occaecat.

`The great Sir Adam Catlace was named after Countess Ada Lovelace, the first programmer ever.`

We also have some more text here. Et laborum venison nostrud, ut veniam sint kielbasa ullamco pancetta.

最初的实际效果如下：

如果我们为figure添加一道边框，在默认情况下，如下图所示：

我们会发现边框实际是跟着屏幕的宽度在变化的，但我们实际上想要的是让figure这个元素跟它所包含的图片一样宽，并且使图片水平居中于屏幕中心。

那么我们应该怎么解决呢？

方案1：float

我们的确的到了想要的宽度，但是网页的布局也混款了。

方案2：display: inline-block

我们得到了我们想要的宽度，但我们发现很难继续完成水平居中的任务，我们需要：

但我们发现这样很麻烦，我们首先对其父元素设置了text-align:center，然后又对其父元素的其他子元素又设置了text-align:left，就算是这样，图片的说明文字还是比图片宽，很难看。

最终方案：

这个min-content的意思就是将这个元素宽度设置为这个容器内部最大的不可断行的元素的宽度(即最宽的单词、图片或具有固定宽度的盒元素)。

css background-image 高度自适应_每天一个CSS小技巧 - 内容元素的自适应相关推荐

arm ida 伪代码安卓符号表_每天一个IDA小技巧（一）: 序言
前言 Native逆向大概是每个逆向人都敬畏又心存挑战的存在,但是又不知道从何下手,得益于汇编的繁琐,简单的高级语言在反编译成汇编指令之后分析起来复杂膨胀了无数倍,再加上对IDA Pro的一无所知,反 ...
用python画哆啦a梦的身体_每天一个Python小技巧，用Python 画个多啦A梦，小猪佩奇，文末还有Python入门学习视频...
见网络上有人用Python 画出来个多啦A梦,很是新奇,来来来,我们看一下他们主要用到的库. 其实主要用的库就一个 turtle 库先说明一下turtle绘图的基础知识: 1. 画布(canvas) ...
python turtle绕原点旋转_每天一个Python小技巧，用Python 画个多啦A梦，小猪佩奇，文末还有Python入门学习视频
见网络上有人用Python 画出来个多啦A梦,很是新奇,来来来,我们看一下他们主要用到的库. 其实主要用的库就一个 turtle 库先说明一下turtle绘图的基础知识: 1. 画布(canvas) ...
new 一个结构体数组_每天一个IDA小技巧（四）：结构体识别
之前提到IDA可以将一长串的数组数据声明变成一行数组声明,简化反汇编代码,对于结构体,IDA也同样支持通过各种设置工具来改善结构体代码的可读性. 这篇文章的目标是将[edx+10h]之类的结构体元素访 ...
python常用标准库的基本用法_[每天一个python小技巧]Python中标准库OS的常用方法总结...
前言: 最近使用的数据相关的操作比较多,所以对于os的操作使用频繁,为了避免点开N个浏览器进行查看不同的方法,现将自己常用以及网上所提及的总结归纳如下. 1.获得当前操作系统使用的目录分隔符 os.s ...
每天一个前端小技巧——生成gif动图下载
每天一个前端小技巧--生成gif动图下载动态热图的展现,分别展现某个时间段的热图时间变化,例如:最近一周七天内,每天的热图分布变化图:这个动态变化的图生成一个gif图提供下载是否可行? 实现方案: ...
程序员的反击！每天一个离职小技巧
作者 | 梦想橡皮擦来源 | 非本科程序员(ID:htmlhttp) 写在前面俗话说的好,代码写的少,离职少不了. 最近畅游互联网,发现一些离职小技巧,读后,内心被深深的打动了,但是细细的品过之后 ...
html文本最小长度,CSS中处理不同长度文本的几种小技巧
CSS中处理不同长度文本的几种小技巧 [推荐教程:CSS视频教程 ] 当我们使用 CSS 构建布局时,考虑长短文本内容很重要,如果能清楚地知道当文本长度变化时需要怎么处理,可以避免很多不必要的问题. ...
3分钟学会python_3分钟学会一个Python小技巧
Python时间日期转换在开发中是非常高频的一个操作,你经常会遇到需要将字符串转换成 datetime 或者是反过来将 datetime 转换成字符串. datetime 分别提供了两个方法 strp ...

css background-image 高度自适应_每天一个CSS小技巧 - 内容元素的自适应

css background-image 高度自适应_每天一个CSS小技巧 - 内容元素的自适应相关推荐

最新文章

热门文章