Skalierte/Proportionale Inhalte mit CSS und JavaScript

Das Web ist ein fließender Ort. Bildschirme unterschiedlicher Größe, yadda yadda yadda. Glücklicherweise für uns ist das Web darauf vorbereitet. Textumbruch. CSS gibt uns die Kontrolle darüber, wie Dinge dimensioniert werden. Was wir (zumindest einfach) nicht bekommen, ist eine Möglichkeit, ganze Elemente (und ihre Kinder) proportional zu skalieren – und dabei ihr exaktes Layout beizubehalten, wenn sie ihre Größe ändern.

Das können wir aber trotzdem tun.

Die proportionale Skalierung eines *Containers* ist ziemlich einfach

Onkel Davids alter gepolsterter Kasten

.parent {
  height: 0;
  padding-bottom: 56.25%; /* 16:9 */
  position: relative;
}

Wenn Sie dann Inhalt darin haben möchten, können Sie einen abdeckenden Container absolut darin positionieren

.child {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}

Das kann sehr nützlich sein für Dinge wie Bilder, Container, die unabhängig voneinander scrollen können, oder Container mit so viel Freiraum, dass sie dramatische Formänderungen verkraften können.

Wenn der Inhalt dieses Containers beispielsweise ein Bild wäre, funktioniert das hervorragend!

Aber die Dinge sind nicht so erfreulich, wenn es eine Menge HTML-Element-Kinder gibt, die einfach nur tun, was normale HTML-Elemente eben tun.

Proportionale Skalierung von allem

Nehmen wir an, das ist die Art von Sache, die wir anstreben

CSS allein kann das nicht wirklich. Aber CSS ist immer noch die Antwort! transform: scale(); ist das, was wir brauchen. Es skaliert Dinge perfekt proportional. Wir müssen ihm nur eine Zahl zum Skalieren geben, und diese Skalierung können wir mit etwas JavaScript ermitteln.

Der Trick ist

var scale = Math.min( 
  availableWidth / contentWidth, 
  availableHeight / contentHeight 
);

Hier ist ein möglicher Ansatz dafür, mit jQuery und jQuery UI Resizeable (weil das für mich einfach und bequem ist)

Siehe den Pen Resize with Scale von Chris Coyier (@chriscoyier) auf CodePen.

Andere Wege…

SVG macht das von sich aus. Das behandeln wir bald in einem Artikel. Ich habe ein paar *Dinge zu sagen*. ;)

Außerdem kann man vielleicht alles mit vw/vh-Einheiten skalieren, aber das klingt nach einer Menge Arbeit und einer ganzen Menge magischer Zahlen.

Das braucht man wahrscheinlich eher selten

Der Grund, warum ich diese Idee so gut finde, ist, dass ich bemerkt habe, dass von Slides.com eingebettete Diashows so funktionieren.

@chriscoyier Danke! Inhalte werden proportional skaliert, aber die Hintergrundgröße ist flexibel, um 100 % des verfügbaren Platzes auszufüllen. pic.twitter.com/1CybHUBdoS

— Slides (@slides) 18. November 2015

Das ist ein perfekter Anwendungsfall. Slides.com gibt Ihnen eine feste Leinwand, auf der Sie Ihre Folien erstellen können, was absolut Sinn macht. Dann können diese Folien bei Bedarf skaliert werden, um in einem größeren Raum präsentiert zu werden. Oder sie werden kleiner skaliert, um auf kleinere Bildschirme zu passen (z. B. wenn Sie sie in einen Blogbeitrag mit einer schmalen Inhaltsspalte einbetten oder auf einem Mobilgerät anzeigen).

Ich denke auch an Embedded Pens. Manchmal entwerfen Leute Pens so, dass sie in einem größeren Bereich funktionieren, und das Design bricht zusammen, wenn es eingebettet wird. Ich könnte dies verwenden, um den Inhalt proportional zu skalieren, aber nur so weit wie nötig, um ihn anzupassen.

Vielleicht iFrames? Wahrscheinlich meist Drittanbieter- oder benutzergenerierte Inhalte, und in Situationen, in denen das Verhältnis wichtig ist, ansonsten machen Sie mit normaler RWD-Aktion weiter.