[css] bild container proportional skalieren

Dieses Thema im Forum "Webdesign" wurde erstellt von onip, 13. Januar 2014 .

Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. 13. Januar 2014
    hi zusammen,

    weiß jemand von euch wie redbull das gelöst hat?
    Red Bull verleiht Flügel - RedBull.com

    das hauptbild (keyvisual) skaliert sich proportional.
    klar ein bild kein problem.
    aber wie sieht es mit dem container drumherum aus?
    je nach browserbreite wird die höhe angepasst.
    so wie ich das sehe ist das kein JS sondern wird mit CSS umgesetzt.
    ich hab leider noch nicht herausgefunden wie die das machen.
     
  2. 13. Januar 2014
    AW: [css] bild container proportional skalieren

    Das Bild wurde absolut positioniert mit top:0; left:0; bottom:0; right:0;
    Damit wird bewirkt, dass sich das Bild dem übergeordnetem Element (relative/absolute) anpasst.
     
  3. 13. Januar 2014
    AW: [css] bild container proportional skalieren

    aber was ist mit dem div drumherum?
    der ändert seine höhe.
     
  4. 13. Januar 2014
    Zuletzt bearbeitet: 13. Januar 2014
    AW: [css] bild container proportional skalieren

    Responsive images – how to prevent reflow

    Bei dem Code wird das Bild in einen Container gepackt der ein Padding-Bottom mit dem passenden Proportion-Ratio-Wert in Prozent.
    Bei 16-9 ist der Wert 56.25%

    Die Berechnung ist relativ einfach:
    16-9 = (9 / 16) * 100 = 56.25


    P.s.: So ähnlich haben die es auch auf der Seite von "Red Bull" gemacht.
    P.s.: Für das anpassen der Schriftgröße wurden Media-Querys benutzt:
    Code:
    @media only screen and (min-width: 640px) {
     font-size: 3.25em;
     line-height: 1em;
    }
     
  5. 13. Januar 2014
    Zuletzt bearbeitet: 13. Januar 2014
    AW: [css] bild container proportional skalieren

    wie geil, genau so.
    und wieder ein tut mehr
     
  6. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.