iframe proportional skalieren

  • Sam94

    (@sam94)


    vor 10 Jahren, 7 Monaten

    Hallo liebe Forenmitglieder.

    Ich habe ein kleines Problem.
    Ich habe mir eine Webseite mittels WordPress erstellt, und konfiguriere diese dann meinen Ansprüchen entsprechend selbst.

    Ich wollte nun ein Soundcloud Player einsetzen, sodass meine Besucher sofort über die Webseite Musik hören können. Soundcloud hat jedoch nun vor kurzem ein neues Player-Layout veröffentlicht, bei welchem der Hintergrund das Cover des Liedes ist.
    Nun würde ich ganz gerne den Player so einfügen, dass er immer die gleiche Höhe und Breite hat, sodass der Cover komplett zu sehen ist. Das Widget soll also zu jedem Zeitpunkt eine quadratische Form haben.
    Bei der breite ist das ja einfach: width: 100% und fertig aber die Höhe??

    Also noch mal kurz und bündig.
    iframe Soundcloud Player Widget in der Proportion 1:1 (Höhe = Breite ) skalieren. Breite 100% der Seite.
    Wie muss ich das programmieren damit das Widget diese Proportion immer beibehält, egal op Handy Version, oder Desktop PC, 13″ Schirm oder 27″.

    Vielen Dank im Voraus.
    LG Sam94

Ansicht von 2 Antworten – 1 bis 2 (von insgesamt 2)
  • Liath

    (@liath)

    vor 10 Jahren, 6 Monaten

    ich weiss grad nicht wie das bei dem Player ist, aber Bilder werden meist automatisch proportional skaliert.

    D.h. wenn Du die Breite fixierst, passt sich die Höhe an und umgekehrt, ansonsten versuch doch einfach mal ein „width“ Attribut im iframe-code anzugeben

    Moderator Torsten Landsiedel

    (@zodiac1978)

    vor 10 Jahren, 6 Monaten

    Ich befürchte das geht nicht.

    Ein Bild hat ja ein festes Seitenverhältnis, also können die Maße responsive eingestellt werden auf:

    max-width: 100%;
width: 100%;
height: auto;

    Maximal so groß wie Originalgröße, aber so groß wie möglich, was den Platz angeht und die Höhe passt sich an.

    Bei iframes gibt es allerdings kein festes Seitenverhältnis. Die Höhe hängt nicht vom Inhalt ab, sondern muss explizit angegeben werden. Mit reinem CSS kannst Du das also nicht umsetzen.

    Per Javascript könntest Du auslesen wie groß das iframe in der Breite ist und dann diesen Wert ebenfalls per Javascript als Höhe für den iframe umsetzen.
    Bei Größenveränderungen muss dieser Wert dann immer verändert werden.

    Klingt kompliziert. Ist es auch…. 😉

    Gruß, Torsten

Ansicht von 2 Antworten – 1 bis 2 (von insgesamt 2)
  • Das Thema „iframe proportional skalieren“ ist für neue Antworten geschlossen.

Schlagwörter