#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