grid mit image

[Rolf B]

Hallo Rolf,

update: Nein, geht nicht so gut. Die h1 Überschrift bringt von Haus aus eine höhere Fontgröße mit. Dem span font-size: 1em zu geben, bezieht sich auf diese Fontgröße. Das ist zunächst unproblematisch, aber nun kommen wir zu einem Punkt den ich schonmal hatte: Mindestgröße. Die h1-Schrift sollte nicht zu klein werden. Bevor das passiert, sollte sie umbrechen. Das erreicht man, indem man für scale einen Mindestwert vorsieht.

Aber bei der h1+span Konstruktion führt das (bei mir) zu einem zu großen Zeilenabstand im span.

Das kann man vermutlich irgendwie heilen, aber ich glaube, es ist einfacher, wenn man das h1 Element für die Dauer der Einmessung auf display:inline-block umschaltet, captionElement auf das h1 Element zeigen lässt und auf den span verzichtet. Das nachstehende Beispiel verwendet eine Mindestgröße von 0.5em.

function scaleCaption(containerElement, captionElement)
{
	if (!captionElement.initialWidth)
	{
		captionElement.style.fontSize = '1em';
		captionElement.style.whiteSpace = 'nowrap';
		captionElement.style.display = 'inline-block';
		captionElement.initialWidth = captionElement.offsetWidth;
		captionElement.style.display = '';
		captionElement.style.whiteSpace = '';
	}
	
	var scale = containerElement.offsetWidth / captionElement.initialWidth;
  captionElement.style.fontSize = Math.max(0.5, scale) + 'em';
}

Rolf