是否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/。但那个小提琴并不完美，而且创作过于复杂。它使用SVG是因为我正在试验将内容制作为单个图像，然后设置max-width，但这并不奏效，它只是裁剪图像。

有一个纯CSS解决方案来创建这种效果呢？

Answer 1

我想知道如果有一个唯一的CSS的解决方案，使内容扩展 以满足他们的容器

简短的回答：

号

更长回答：

Yo u能缩放字体大小：

• 相对于视（使用vw，vh，vmax和vmin）相对于当前元素的字体大小
• （使用em或%）
• 相对根元素的字体大小（使用rem）

可以也规模相对于其父元素的字体大小如果所讨论的父元素是也相对于视口大小为。

例如。如果样式表读取：

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

则p的width永远是视口宽度的20％和p的font-size永远是视口宽度的2％...所以的font-sizep将永远是p的width的10％。

还可以（不言而喻）相对于固定宽度父字体大小比例：

例如。如果样式表上写着：

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

那么p的font-size永远是p的width的10％。

但是没有使固定宽度元素的font-size与元素中存在的文本量成反比的单位。

这并不是说你不能建立过程中的一个基于JavaScript的解决方案...

所以，这里是一个快速的脚本，从而降低一个div的font-size为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>