html - HTML/CSS 是否支持自动缩放内容以匹配/填充容器？

Question

我想知道是否有一个纯 CSS 的解决方案来使内容缩放以适合其容器，无论是图像还是文本，如下所示:

.container {
    display: inline-block;
    width: 2in;
    height: 1in;
    font-size: fit-to-container /* <- what should this be? */
}

<div class="container">Some Text</div>
<div class="container">Another container with significantly 
more content, and so the font should scale down to fit</div>

或者，图片:

.container {
    display: inline-block;
    width: 2in;
    height: 1in;
    overflow: resize-to-fit /* <- not really, overflow can't do it */
}

<div class="container">
 <img src="one.png"/>
</div>

<div class="container">
 <img src="one.png"/>
 <img src="two.png"/>
 <img src="three.png"/>
 <img src="four.png"/>
 <img src="five.png"/>
 <img src="six.png"/>
 <img src="seven.png"/>
 <img src="eight.png"/>
</div>

作为视觉示例，请参见 https://jsfiddle.net/jarrowwx/jemxLqyL/94/ .但是那个 fiddle 并不能完美地完成它，而且创建起来过于复杂。它使用 SVG，因为我正在尝试将内容制作成单个图像，然后设置 max-width，但这也不起作用，它只是裁剪了图像。

是否有纯 CSS 解决方案来创建这种效果？

Answer 1

I'm wondering if there is a CSS-only solution to make contents scale to fit their container

简答:

没有。

更长的答案:

您可以缩放字体大小:

• 相对于视口(viewport)(使用 vw、vh、vmax 和 vmin)
• 相对于当前元素的字体大小(使用 em 或 % )
• 相对于根元素的字体大小(使用 rem )

您可以也相对于其父元素缩放字体大小，如果有问题的父元素也相对于视口(viewport)。

例如如果样式表显示为:

p {
width: 20vw;
font-size: 2vw;
}

然后是 width的 p将始终是视口(viewport)宽度的 20%，font-size的 p将始终是视口(viewport)宽度的 2%... 所以 font-size的 p永远是 width 的 10%的 p .

您还可以(不言而喻)相对于固定宽度的父级缩放字体大小:

例如如果样式表显示为:

p {
width: 200px;
font-size: 20px;
}

然后是 font-size的 p永远是 width 的 10%的 p .

但没有启用 font-size 的单元固定宽度元素的大小与元素中存在的文本量成反比。

当然这并不是说您不能构建基于 javascript 的解决方案...

所以，这是一个减少 font-size 的快速脚本的 div作为那个 div 的文本内容增加:

var containers = document.getElementsByClassName('container');

for (var i = 0; i < containers.length; i++) {
var text = containers[i].textContent;

var calculatedFontSize;

switch (true) {
case (text.length < 10) : calculatedFontSize = 50; break;
case (text.length < 20) : calculatedFontSize = 40; break;
case (text.length < 30) : calculatedFontSize = 30; break;
case (text.length < 40) : calculatedFontSize = 24; break;
case (text.length < 50) : calculatedFontSize = 22; break;
case (text.length < 60) : calculatedFontSize = 21; break;
case (text.length < 70) : calculatedFontSize = 20; break;
case (text.length < 80) : calculatedFontSize = 19; break;
case (text.length < 90) : calculatedFontSize = 18; break;
case (text.length < 100) : calculatedFontSize = 17; break;
case (text.length < 110) : calculatedFontSize = 16; break;
case (text.length < 120) : calculatedFontSize = 15; break;
case (text.length < 130) : calculatedFontSize = 14; break;
default : calculatedFontSize = 12; break;
}

containers[i].style.fontSize = calculatedFontSize + 'px';
}

.container {
position: relative;
display: inline-block;
width: 2in;
height: 1in;
margin: 0 6px 6px 0;
background-color: rgb(191,191,191);
vertical-align: top;
}

<div class="container">
Some Text.
</div>

<div class="container">
A little more text.
</div>

<div class="container">
Considerably more text, now something like the size of a sentence.
</div>

<div class="container">
Another container with significantly more content, and so the font should scale down to fit.
</div>

<div class="container">
A fifth container with a very much larger amount of content, which inevitably ends up creating a much longer sentence.
</div>