shrink-to-fit 自适应宽度

已于 2022-07-05 02:35:34 修改
阅读量1.2k 收藏 1
点赞数
文章标签： css
于 2022-06-27 11:51:11 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Carol246/article/details/125481307
版权

这样的元素宽度会是多少？

一个未指定宽度的绝对定位元素，内部有两张宽度为百分比的图片，这个绝对定位的元素和两张图片的宽度分别会是多少呢？

<div style={{ position: "absolute" }}>
	{/* 原图为：500*300 */}
	<img
		style={{ width: "50%" }}
		src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp1.itc.cn%2Fq_70%2Fimages03%2F20200602%2Fe31e0b1434704616b70e105f0cbd3542.jpeg&refer=http%3A%2F%2Fp1.itc.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1659447015&t=6979602a7ce96b4714e129cbf090a43c"
	/>
	{/* 原图为：300*200 */}
	<img
		style={{ width: "25%" }}
		src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fq_70%2Cc_lfill%2Cw_300%2Ch_200%2Cg_faces%2Fimages%2F20200430%2Fff0c28c89582426ab9e2d3098c129a31.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1659447655&t=7b78fdc9779639cbf1e51ae0863ccb64"
	/>
</div>

结果是：
div 的宽度是 800px，第一张图片的宽度是 400px，第二张图片的宽度是 200px。

在这里插入图片描述
是怎么计算出这个结果的呢？这就需要说到 shrink-to-fit 宽度。

shrink-to-fit 自适应宽度

shrink-to-fit 是 CSS2.1 的一个规范——没有指定宽度的部分元素，会使用 shrink-to-fit 来计算宽度值。

会使用这种计算方式的元素有：

  • 浮动元素
  • 绝对定位元素
  • inline-block

计算公式是：

shrink-to-fit width = min(max(preferred minimum width, available width), preferred width)

其中，preferred minimum width、available width、preferred width 分别是什么呢？这些名词在 CSS3 中都有对应的名称，可以结合起来理解一下。

在 CSS3 中，这些名词对应的叫法和样式是：

CSS2CSS3CSS3 对应的样式
preferred minimum widthmin-content sizewidth: min-content
preferred widthmax-content sizewidth: max-content
available widthstretch-fit sizewidth: fill-available
shrink-to-fit widthfit-content sizewidth: fit-content

并且，fit-content size 和 shrink-to-fit width 的计算方式也是一样的：

fit-content size = min(max-content size, max(min-content size, stretch-fit size))

下面，具体来看一下它们是指什么。

width: min-content (preferred minimum width)

width: min-content 是指，采用内部元素「最小宽度值」最大的那个元素的宽度，作为最终容器的宽度。有点绕……

「最小宽度值」的意思是：

  • 替换元素：比如图片元素，就是它呈现的宽度，特殊地，如果宽度为百分比，那么最小宽度值视作 0
  • 中文：就是一个中文的宽度
  • 英文：因为默认英文单词不换行，所以就是里面最长英文单词的宽度

🌰 替换元素：

<div style={{ width: "min-content" }}>
	{/* 原图为：300*200 */}
	<img
		src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fq_70%2Cc_lfill%2Cw_300%2Ch_200%2Cg_faces%2Fimages%2F20200430%2Fff0c28c89582426ab9e2d3098c129a31.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1659447655&t=7b78fdc9779639cbf1e51ae0863ccb64"
	/>
</div>

在这里插入图片描述

<div style={{ width: "min-content" }}>
	{/* 原图为：300*200 */}
	<img
		width="50%"
		src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fq_70%2Cc_lfill%2Cw_300%2Ch_200%2Cg_faces%2Fimages%2F20200430%2Fff0c28c89582426ab9e2d3098c129a31.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1659447655&t=7b78fdc9779639cbf1e51ae0863ccb64"
	/>
</div>

在这里插入图片描述

🌰 中文：

<div style={{ width: "min-content" }}>
	<p>中文中文中文</p>
</div>

在这里插入图片描述

🌰 英文：

<div style={{ width: "min-content" }}>
	<p>English words English words</p>
</div>

在这里插入图片描述

width: max-content (preferred width)

width: max-content 是指，让元素内容强制不换行后的最大宽度。也就是，假设容器有足够的宽度，此时元素占据的宽度就是 max-content 的值。

它的表现会像设置了 white-space: nowrap 一样：

<div style={{ width: 100, backgroundColor: "#ccc" }}>
	<p>很长的文字，会超出容器宽度</p>
</div>

在这里插入图片描述

<div style={{ width: 100, backgroundColor: "#ccc" }}>
	<p style={{ width: "max-content" }}>很长的文字，会超出容器宽度</p>
</div>

在这里插入图片描述

当内部元素是宽度为百分比的图片时，最大宽度以图片的原始尺寸来计算：

<div style={{ width: "max-content", fontSize: 0 }}>
	{/* 原图为：300*200 */}
	<img
		style={{ width: "50%" }}
		src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fq_70%2Cc_lfill%2Cw_300%2Ch_200%2Cg_faces%2Fimages%2F20200430%2Fff0c28c89582426ab9e2d3098c129a31.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1659447655&t=7b78fdc9779639cbf1e51ae0863ccb64"
	/>
</div>

在这里插入图片描述

width: fill-available (available width)

width: fill-available 是指，占满可用空间。

和 width: 100% 的区别是，width: fill-available 会在 100% 的基础上，去掉元素 margin、border、padding 的宽度。

🌰 一个 inline-block 的元素:

<div style={{ width: 200, height: 100, backgroundColor: "lightblue" }}>
	<div
		style={{
			display: "inline-block",
			width: "100%",
			padding: 10,
			margin: "0 10px",
			border: "10px solid orange",
			backgroundColor: "yellow",
		}}
	>
		内容内容
	</div>
</div>

在这里插入图片描述

  • width: 100%
<div style={{ width: 200, height: 100, backgroundColor: "lightblue" }}>
	<div
		style={{
			display: "inline-block",
			width: "100%",
			padding: 10,
			margin: "0 10px",
			border: "10px solid orange",
			backgroundColor: "yellow",
		}}
	>
		内容内容
	</div>
</div>

在这里插入图片描述

  • width: fill-available
<div style={{ width: 200, height: 100, backgroundColor: "lightblue" }}>
	<div
		style={{
			display: "inline-block",
			width: "-webkit-fill-available",
			padding: 10,
			margin: "0 10px",
			border: "10px solid orange",
			backgroundColor: "yellow",
		}}
	>
		内容内容
	</div>
</div>

在这里插入图片描述

开头栗子的计算过程

再回来看开头的栗子：

<div style={{ position: "absolute" }}>
	{/* 原图为：500*300 */}
	<img
		style={{ width: "50%" }}
		src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp1.itc.cn%2Fq_70%2Fimages03%2F20200602%2Fe31e0b1434704616b70e105f0cbd3542.jpeg&refer=http%3A%2F%2Fp1.itc.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1659447015&t=6979602a7ce96b4714e129cbf090a43c"
	/>
	{/* 原图为：300*200 */}
	<img
		style={{ width: "25%" }}
		src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fq_70%2Cc_lfill%2Cw_300%2Ch_200%2Cg_faces%2Fimages%2F20200430%2Fff0c28c89582426ab9e2d3098c129a31.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1659447655&t=7b78fdc9779639cbf1e51ae0863ccb64"
	/>
</div>

结果是：
div 的宽度是 800px，第一张图片的宽度是 400px，第二张图片的宽度是 200px。

看下这个结果是怎么算出来的，带入 shrink-to-fit width 的计算公式：

shrink-to-fit width = min(max(preferred minimum width, available width), preferred width)

  • preferred minimum width 是 0
<div style={{ position: "absolute", width: "min-content" }}>
	{/* 原图为：500*300 */}
	<img
		style={{ width: "50%" }}
		src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp1.itc.cn%2Fq_70%2Fimages03%2F20200602%2Fe31e0b1434704616b70e105f0cbd3542.jpeg&refer=http%3A%2F%2Fp1.itc.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1659447015&t=6979602a7ce96b4714e129cbf090a43c"
	/>
	{/* 原图为：300*200 */}
	<img
		style={{ width: "25%" }}
		src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fq_70%2Cc_lfill%2Cw_300%2Ch_200%2Cg_faces%2Fimages%2F20200430%2Fff0c28c89582426ab9e2d3098c129a31.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1659447655&t=7b78fdc9779639cbf1e51ae0863ccb64"
	/>
</div>

在这里插入图片描述

  • available width 是浏览器可视区域的宽度 1440px
<div style={{ position: "absolute", width: "-webkit-fill-available" }}>
	{/* 原图为：500*300 */}
	<img
		style={{ width: "50%" }}
		src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp1.itc.cn%2Fq_70%2Fimages03%2F20200602%2Fe31e0b1434704616b70e105f0cbd3542.jpeg&refer=http%3A%2F%2Fp1.itc.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1659447015&t=6979602a7ce96b4714e129cbf090a43c"
	/>
	{/* 原图为：300*200 */}
	<img
		style={{ width: "25%" }}
		src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fq_70%2Cc_lfill%2Cw_300%2Ch_200%2Cg_faces%2Fimages%2F20200430%2Fff0c28c89582426ab9e2d3098c129a31.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1659447655&t=7b78fdc9779639cbf1e51ae0863ccb64"
	/>
</div>

在这里插入图片描述

  • preferred width 是 500 + 300 = 800px
<div style={{ position: "absolute", width: "max-content" }}>
	{/* 原图为：500*300 */}
	<img
		style={{ width: "50%" }}
		src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp1.itc.cn%2Fq_70%2Fimages03%2F20200602%2Fe31e0b1434704616b70e105f0cbd3542.jpeg&refer=http%3A%2F%2Fp1.itc.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1659447015&t=6979602a7ce96b4714e129cbf090a43c"
	/>
	{/* 原图为：300*200 */}
	<img
		style={{ width: "25%" }}
		src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fq_70%2Cc_lfill%2Cw_300%2Ch_200%2Cg_faces%2Fimages%2F20200430%2Fff0c28c89582426ab9e2d3098c129a31.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1659447655&t=7b78fdc9779639cbf1e51ae0863ccb64"
	/>
</div>

在这里插入图片描述

即，div 的 shrink-to-fit width 值为 min(max(0, 1440px), 800px) = 800px，再根据 div 的宽度按百分比计算出两张图片的宽度，分别为 400px 和 200px。

参考

不定宽元素的宽度计算
理解CSS3 max/min-content及fit-content等width值

__竹子__
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
shrink-to-fit(自适应宽度)
追
07-28 5236
自适应宽度是指当未明确设定容器的宽度（或外边距设为auto）时，在特定的情况下容器的宽度会根据情况自行设定，而设定的结果往往并不是我们想要的。 W3C规范中描述了几种shrink-to-fit的情况 10.3.5 Floating, non-replaced elements 10.3.7 Absolutely positioned, non-replaced elements 10.3.8 Ab
grunt-shrink-selectors
05-29
grunt-shrink-selectors CSS 重命名工具 入门 这个插件需要 Grunt ~0.4.5 如果您以前从未使用过 ，请务必查看《指南》，因为它说明了如何创建以及安装和使用Grunt插件。 熟悉该过程后，可以使用以下命令安装此插件： npm install grunt-shrink-selectors --save-dev 安装插件后，可以使用以下 JavaScript 代码在 Gruntfile 中启用它： grunt . loadNpmTasks ( 'grunt-shrink-selectors' ) ; “ shrink_selectors”任务 概述 在项目的 Gruntfile 中，将一个名为shrink_selectors的部分添加到传递给grunt.initConfig()的数据对象中。 grunt . initConfig ( { s
C++11:shrink_to_fit的基本作用与使用
Taopper的博客
03-08 1万+
vector::shrink_to_fit() 是 C++ STL 中的内置函数，它减少容器的容量以适应其大小并销毁超出容量的所有元素。 #include <iostream> #include <vector> using namespace std; int main() { vector<int> v(10); for (int i = 0; i < 10; i++) v[i] = i; cout << "Vector size
CSS3 max/min-content及fit-content、fill-available值的详解
最新发布
柑橘乌云_
04-17 805
上面水平居中的案例就是很好的说明，可以让元素保留原有display值的特性的同时，拥有别的display值的特性。
【STL】vector的常见接口使用
weixin_60718941的博客
02-22 670
本文详解Vector的主要功能。
reserve()怎么用？shrink_to_fit()的用法？
weixin_42195477的博客
05-17 339
reserve()是 vector 的成员函数，用于预分配 vector 的内存空间，可以避免频繁的内存分配和复制操作，提高 vector 的效率。在上面的示例中，我们首先创建了一个空的 vector，其大小为 0，容量为 0。然后，调用reserve()函数预分配 10 个元素的内存空间。此时，vector 的大小仍为 0，容量为 10。接着，通过函数将 10 个元素添加到 vector 中。最后，我们输出 vector 的大小和容量，发现 vector 的大小为 10，容量仍为 10。
vector::shrink_to_fit()
liji_digital的博客
09-01 3254
如图示（图片来自侯捷的<<STL源码剖析>>），vector::capacity()代表了vector从begin()开始的连续空间的内存量。 vector::erase(begin() + n)函数可以删去vector中第n位置的元素。但是删除之后，vector占用的capacity不一定减少。C++11增加了shrink_to_fit函数，可以在执行erase之...
C++ shrink_to_fit（）的实现
热门推荐
十一月zz的博客
12-26 1万+
有一种方法来把它从曾经最大的容量减少到它现在需要的容量。这样减少容量的方法常常被称为“收缩到合适（shrink_to_fit）”。该方法只需一条语句：vector(ivec).swap(ivec); 表达式vector(ivec)建立一个临时vector，它是ivec的一份拷贝：vector的拷贝构造函数做了这个工作。但是，vector的拷贝构造函数只分配拷贝的元素需要的内存，所以这个临时vec
shrink_to_fit_vector :: shrink_to_fit（）函数以及C ++ STL中的示例
cumubi7552的博客
07-05 763
shrink_to_fit C ++ vector :: shrink_to_fit()函数 (C++ vector::shrink_to_fit() function) vector::shrink_to_fit() is a library function of "vector" header, which is used to reduce capacity to fit size. Re...
shrink-string:适用于Node的微型字符串压缩模块
05-04
npm i shrink-string 用法 const { compress , decompress } = require ( 'shrink-string' ) // `compress` takes a unicode string and returns a base64 string // `decompress` takes that base64 string and ...
前端开源库-shrink-ray-current
08-30
前端开源库-shrink-ray-current收缩光线流，node.js压缩中间件，支持brotli和zopfli
shrink-开源
05-01
Amiga收缩压缩程序Linux端口。 这主要用于解压缩使用Amiga版本的rinkage创建的旧档案，但也支持创建新档案。
vector_shrink_to_fit
weixin_43499703的博客
05-25 380
// vector::shrink_to_fit #include <iostream> #include <vector> using namespace std; //缩小以适应 //请求容器降低容量以适应其大小。 //请求是非绑定的，容器实现可以自由地进行优化，使向量的容量大于其大小。 //这可能会导致重新分配，但对向量大小没有影响，并且不能更改其元素。 int...
jGrid表格，用shrinkToFit属性设置列的宽度为不自适应表格宽度
From zero
09-04 8767
jGrid表格里，通常列的宽度会自适应的填充至整个表格，一般当字段多的时候倒没什么关系。但如果表内只有两三个字段，列的宽度自适应表的宽度后，看起来就很别扭。 $("#meterTypeGrid").jqGrid({ url: 'metertype/list/condition/page.mvc', mtype:"GET", styleU...
LVI-SAM学习笔记3：clear()和shrink_to_fit()函数
JaydenQ的博客
05-06 567
void freeCloudInfoMemory() { cloudInfo.startRingIndex.clear(); cloudInfo.startRingIndex.shrink_to_fit(); // 从原来最大容量减少到现在所需要的容量（释放数组的容量） cloudInfo.endRingIndex.clear(); cloudInfo.endRingIndex.shrink_to_fit(); ...
c++中vector的clear(),swap()以及 shrink_to_fit()方法
KingOfMyHeart的博客
06-30 1603
clear() 仅仅将容器中的元素释放(析构)掉，会导致size = 0,但是容器容量capacity不会变，即占用内存没有变化。 int main() { std::vector<int> vec; std::cout<<vec.size()<<std::endl; std::cout<<vec.capacity()<<std::endl; for(int i= 0;i < 10;++i) {
c++ 将容量设置为容器的长度（shrink_to_fit）
weixin_30279315的博客
12-12 234
#include <iostream> #include <vector> using namespace std; int main () { vector<int> myvector (25); cout << "1. capacity of myvector: " << myvector.cap...
【xlwings api语言参考】Range.ShrinkToFit 属性
DataLab的博客
05-21 179
功能： 返回或设置一 个布尔值，该值指示文本是否自动缩小以适应可用列宽。 语法： rng.ShrinkToFit rng是一个表示 Range 对象的变量。 说明： 如果文本自动缩小以适应可用列宽，则此属性返回 True ;如果该属性不设置为指定区域内所有单元格的相同值，则返回空。 示例： 此示例使第一行中的文本自动收缩为适当尺寸以适应可用列宽。 import xlwings as xw app=xw.App() bk=app.books.active sht=bk.sheets.active sht.ap
<meta name="viewport" content="width=device-width, initial-scale=1,shrink-to-fit=no">
05-24
- width=device-width：表示视窗宽度等于设备宽度。 - initial-scale=1：表示初始缩放比例为 1。...- shrink-to-fit=no：表示禁用掉自动缩放功能，使得页面内容不会因为宽度过大而自动缩小到适应屏幕。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值