Vollständige Version anzeigen : [css] bild container proportional skalieren


onip
13.01.2014, 12:03

hi zusammen,

weiß jemand von euch wie redbull das gelöst hat?
Red Bull verleiht Flügel - RedBull~com (;;;redbull~com/de/de)

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.

Hardware Preisvergleich | Amazon Blitzangebote!

Videos zum Thema
Video Loading...
Murdoc
13.01.2014, 12:28

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.


onip
13.01.2014, 12:59

aber was ist mit dem div drumherum?
der ändert seine höhe.


Nanobyte
13.01.2014, 13:09

Responsive images – how to prevent reflow (;andmag~se/2012/10/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:
;media only screen and (min-width: 640px) {
font-size: 3;25em;
line-height: 1em;
}


onip
13.01.2014, 14:07

wie geil, genau so.
und wieder ein tut mehr :thumbsup:


Ähnliche Themen zu [css] bild container proportional skalieren
  • Skalieren bei Adobe Premiere
    so ich hab en problem: habe an die 1000 bilder von meinen klassenkameraden bekommen von meiner abschlussfahrt und jetzt haben die alle ne viel zu hohe auflösung und das is mir erst aufgefallen als ich das ding dan gerendert hatte! wie kann ich alle bilder auf einmal skalieren ich will das nicht bei [...]

  • [JavaScript] Bilder skalieren
    Hallo, ich bin auf der Sucher nach einem bild Upload Script. Und zwar läuft es so das man ein Bild hochlädt und dann das bild erscheint mit einem kasten drauf wo man dann den teil auswählen kann welcher angezeigt werden soll. weiss jemand was ich meien und evtl. wo ich das bekomme ?? [...]

  • wie 22"Widescreen TFT auf 5:4 skalieren
    Hallo, der Titel sagt schon um was es geht;Ich habe einen HP w2228h 22" TFT und eine 8800 GTS 512MB von Zotac. Der Moni ist über HDMI Kabel verbunden und an der Grafikkarte via HDMI-DVI Adapter angeschlossen(kein HDMI an der Graka). Ich nutze Win XP und habe den 180;48 Treiber drauf Mein Pro [...]

  • Video Skalieren
    Hab gerade die gestrige NCIS folge geladen. Jedoch wurde das Video von 16:9 auf 4:3 skaliert und sieht deshalb etwas "komisch" aus. Wie kann ich dieses Video wieder auf 16:9 skalieren? [...]



raid-rush.ws | Imprint & Contact pr