kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Schriftgrößen in vw – Bilder mit Texten proportional skalieren

Textinhalte die optisch in oder vor einem Bild positioniert werden sollen, stellen in einem flexiblen Layout eine große Herausforderung dar. Das Problem besteht darin, dass Bilder meist proportional skaliert werden, wohingegen Texte einfach nur an anderer Stelle umbrechen. Dadurch entsteht ein schwer steuerbares Ungleichgewicht.

Individuelle Breakpoints für jedes Bild sind zwar technisch möglich, in der Praxis jedoch meist nicht realistisch. Auch wäre es denkbar, den Text direkt mit in die Grafik zu speichern, doch aus Gründen der Suchmaschinenoptimierung, Editierbarkeit und Übersetzbarkeit ist eine solche Lösung ebenfalls inakzeptabel.

In diesem Beitrag erklären wir, wie Texte, die optisch vor einem Bild platziert wurden, gemeinsam mit dem Bild proportional skaliert werden können.

Workshops und Seminare von kulturbanause

Visual Prototyping, Responsive Design, CSS Grid & Flexbox, Sketch, Adobe XD …

Jetzt Frühbucher-Rabatte sichern!

Texte mit Hilfe der Einheit vw proportional skalieren

Die Einheit vw (Viewport Width) ermöglicht es Elemente anhand der Breite oder der Höhe (vh = Viewport Height) des Viewports zu gestalten. Wenn man die Schriftgröße in vw angibt, skaliert der Text automatisch größer und kleiner, wenn der Viewport sich verbreitert.

h1 {   font-size:7vw; } p {   font-size:4vw; }

Doch nicht nur Texte können in vw definiert werden, auch Abmessungen mit padding, Umrahmungen mit border und die meisten anderen Eigenschaften lassen sich mit diesem Trick wunderbar flexibel gestalten.

Beispiel: Bild, Text und Button proportional skalieren

Das folgende Beispiel zeigt die praktische Anwendung.

Beispiel anschauen

Folgender Code wird benötigt um das Beispiel herzustellen:

<div>
 <img src="bild.jpg" alt="">
 <div class="textcontainer">
 <h1>Headline</h1>
 <p>Lorem ipsum dolor <br>sit amet, consectetur  <br>adipisicing elit.</p>
 <a href="#">Button</a>
 </div>
</div>
div { position: relative; } img {   width:100%;   height:auto; } .textcontainer {   color:white;   font-family: arial, sans-serif;   position: absolute;   top:0;   left:0;   right:0;   bottom: 0;   padding:5vw; } h1 { font-size:7vw; } p { font-size:4vw; } a {   font-size:4vw;   color:white;   text-decoration: none;   padding:.5em 1em;   border:.1em solid #DA9C07;   display: inline-block;   margin-top: 2vw; }

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Unterstützung bei Responsive Design-Projekten

Unsere Agentur ist auf responsive Design spezialisiert. Wir realisieren u.a. maßgeschneiderte Websites und führen Schulungen durch. Wenn du Unterstützung bei der Planung, Gestaltung und Entwicklung einer Website im Responsive Design benötigst, helfen wir gerne weiter.
Responsive Webdesign-Leistungsangebot →

Das könnte dich auch interessieren

13 Kommentare

  1. Tobias

    Verfasst am 3. Mai 2016 um 9:16 Uhr.

    Sehr schön gedacht. Leider gehst Du nicht darauf ein, dass die „vw“ und „vh“ Größenwerte nicht in allen Browsern funktionieren. Gerade im responsiven Bereich ist hier also ein Fall-Back nötig um die Skalierbarkeit tatsächlich zu gewährleisten. Es ist aber so davon auszugehen, dass das Layout so nicht 1:1 bei Browserns ohne diese Unterstützung, gleichermaßen dargestellt wird.

  2. Marco

    Verfasst am 3. Mai 2016 um 10:29 Uhr.

    Hallo Jonas, danke für den Artikel. Hab dazu mal eine Frage: Gibts für Abstände oder Größen irgendeinen Umrechnungsfaktor oder wie kann man sich die tatsächlichen Größen, oder Ähnliches denn vorstellen? Also gibt es da einen festen Maßstab? Grüße

    • Jonas Hellwig

      Verfasst am 3. Mai 2016 um 10:51 Uhr.

      Hallo Marco, es ist in der Tat sehr schwierig, da es ja von der Größe des Viewports und der gewünschten Ziel-Größe abhängt. Die für mich einfachste Herangehensweise ist die Gestaltung direkt im Browser mit Hilfe der Entwickler-Tools. Falls allerdings jemand einen eleganteren Weg kennt, freue ich mich sehr über eine entsprechende Info!

      • Christoph

        Verfasst am 17. Mai 2016 um 14:16 Uhr.

        Hallo Marco & Jonas,

        die aktuell angezeigte Größe der Schrift lässt sich ganz einfach in px, em bzw. rem aus rechnen:

        Ausgangsdisplay: FullHD (1920×180) = 1920px = 100vw

        Rechnung:

        1920(px) : 100(vw) = 19,2(px) x 7(vw) = 134,4 Pixel (px sind statisch, dieser wert ist so nicht korrekt übertragbar) : 16(px) = 8,4(r)em.

  3. istqb

    Verfasst am 10. Mai 2016 um 11:20 Uhr.

    Wer lange testet, schreibt gute Software, so zumindest der Dauerspruch meines PHP-Profs.Habe mich nun lange mit dem Testen von Bildskalierungen beschäftigt und war nie wirklich glücklich. Werde im letzten Anlauf Deine Anleitung durchgehen – hoffentlich mit Langzeitwirkung.

  4. Chris

    Verfasst am 28. Mai 2016 um 9:49 Uhr.

    Ein paar nette Ideen, aber speziell beim Skalieren über CSS ergibt sich dann die unschöne Lösung, dass bei kleineren viewports unnötig große Dateien geladen werden müssen.
    Habe mich selbst mit der Problematik responsive Design und „adaptive images“ beschäftigt.
    verschiedene Gedanken und Umsetzungen:
    http://php-homepage.com/css/responsive-design.php

    • Jonas Hellwig

      Verfasst am 28. Mai 2016 um 10:53 Uhr.

      Hallo Chris, vielen Dank für deinen Kommentar. Die Skalierung hat nichts damit zu tun, welches Bild geladen wird. Selbstverständlich muss die Technik mit responsive Image-Lösungen kombiniert werden. Also entweder mit verschiedenen CSS Backgrounds, die mittels Media Query ausgetauscht werden, oder verschiedene HTML-Images, die serverseitig oder mittels srcset/sizes ausgetauscht werden. Das -Element ist in diesem Zusammenhang irrelevant, da das Motiv ja nicht verändert werden soll.

      • Chris

        Verfasst am 28. Mai 2016 um 11:22 Uhr.

        Hallo, bist ja schnell beim Freischalten:-)
        die von dir erwähnten Lösungen sind mir bekannt und ich finde sie nur fürs Layout/Design und templates praktibabel,
        Mein nach wie vor großes Problem zur Thematik sind Content Seiten (davon betreiben wir einige), die pro Artikel 5-10 Bilder beinhalten,
        hierfür habe ich noch keine praktikable Lösung gefunden. (Joomla mit mehreren Autoren/Textern).
        Alle Plugins die auf den einschlägigen Joomla Seiten empfohlen werden, machen nur Skalierung über CSS. Ich habe nur eine gute Thumbnail Lösung (genieriert automatisch thumbnails in FIXER Größe), da brauchen die Content Manager nichts weiter machen.
        einziges Beispiel auf Deutsch momentan, den link nimm dann bitte raus
        http://einrichten.haus/stile-style/23-landhaus-stil
        Aber ich kann eben nur thumbnails in fixer Größe generieren lassen, hätte aber gern eine Lösung
        wie im vom mir vorher verlinkten Artikel „adaptive images“, die für die verschiedenen viewports verschiedene Bildgrößen generiert. Bin mit meiner Technik-Testseite (php-homepage.com) noch auf der Suche nach einer Lösung, die ich dann in die Joomla Seiten integrieren kann. Vielleicht hast du ja eine Idee?

  5. Jurij Töpfer

    Verfasst am 22. September 2016 um 16:10 Uhr.

    Hallo Jonas, vielen Dank für den Lösungsansatz! Ich habe mich bei einem vergangenen Projekt damit rumgeärgert die Proportion von Text und Bild anhand mehrerer Media Queries für alle Displaygrößen ideal abzustimmen. Dein Ansatz ist aber viel eleganter. Wird bei nächster Gelegenheit eingesetzt :)

  6. Gregor

    Verfasst am 4. November 2016 um 18:09 Uhr.

    Hi Jonas,

    vielen Dank für deinen tollen Artikel. Ich habe ihn mir mit Freude durchgelesen.

    Verfolge deinen Blog schon seit einer Weile. ;)

    Grüße
    Gregor

  7. Thomas Schneider

    Verfasst am 9. August 2018 um 8:53 Uhr.

    Hallo Jonas,

    mal eine Frage zu der Schrift-Größe font-size:4vw;
    Wie kann ich das Steuer, daß es eine maximale Schriftgöße gibt, die nicht überschritten wird?
    Wenn z.B. der Wrapper, in dem die Schrift liegt, eine maximale Ausdehugung von 1200px hat, aber der Bildschirm überdimensional breit ist, würde ja die Schrift auf Grund der vw-Angabe das Layout zerstören, da Wrapper maximal 1200px ist.
    Gibt es sowas wie
    font-size:4vw, aber font-size-max: 32px?

    VG Thomas

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.