是否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>