Unterstützt HTML/CSS die automatische Skalierung von Inhalten, um den Container zu füllen?

Question

Ich frage mich, ob es eine CSS-Lösung ist nur Inhalt zu machen skalieren ihre Behälter passen, sie Bilder oder Text sein, etwa so:

.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> 

Alternativ mit Bildern:

.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> 

Als ein visuelles Beispiel, siehe https://jsfiddle.net/jarrowwx/jemxLqyL/94/. Aber diese Geige bringt es nicht perfekt zur Geltung, und es war zu kompliziert, sie zu erstellen. Es verwendet SVG, weil ich gerade damit experimentiert habe, den Inhalt als einzelnes Bild zu machen und dann max-width einzustellen, aber das hat auch nicht funktioniert, es hat nur das Bild abgeschnitten.

Gibt es eine reine CSS-Lösung, um diesen Effekt zu erzeugen?

Answer 1

Ich frage mich, ob es eine CSS-Lösung ist nur Inhalte skalieren, um ihre Behälter

Kurze Antwort zu passen:

Nr

Längerer antwort:

Yo u kann eine Schriftart-Größe skaliert:

• relativ zu dem Darstellungsfeld (unter Verwendung von vw, vh, vmax und vmin)
• bezogen auf die Schriftgröße des aktuellen Elements (unter Verwendung von em oder %)
• relativen auf die Schriftgröße des Wurzelelements (mit rem)

können Sie auch Skala eine Schriftgröße relativ zu seinem übergeordneten Element, wenn das fragliche übergeordnete Element ist auch Größe relativ zum Ansichtsfenster.

z. wenn das Stylesheet lautet:

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

dann die width der p immer 20% der Darstellungsbreite sein und die font-size der p immer 2% des Darstellungsbreite sein ... so die font-size von die wird immer 10% der width der p sein.

Sie können auch (selbstverständlich) skalieren, um die Schriftgröße relativ zu einem festen Breite parent:

zB. wenn das Stylesheet lautet:

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

dann die font-size der p immer 10% der width der p sein.

Es gibt jedoch keine Einheit, die die font-size eines Elements mit fester Breite umgekehrt proportional zur Menge des im Element vorhandenen Texts ermöglicht.

Das ist nicht zu sagen, Sie eine Javascript-basierte Lösung natürlich nicht bauen können ...

So, hier ist eine schnelle Skript, das die font-size ein div als Textinhalt dieser div verringert erhöht:

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>