Ankündigung

Einklappen
Keine Ankündigung bisher.

[GELÖST] > [Bootstrap 3] Responsive <img> in absolut positioniertem <figure>

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • [GELÖST] > [Bootstrap 3] Responsive <img> in absolut positioniertem <figure>

    Hi,

    Ich stehe gerade auf dem Schlauch, bei einem Bootstrap-Problem. Vielleicht hat der ein oder andere ja einen Tipp für mich.

    Aktueller Stand:
    Ich habe auf einer Website eine kleine Image-Animation über Keyframes eingebaut. Meines Erachtens benötige ich für meinen Zweck die absolute Positionierung, aber vielleicht habt ihr ja einen besseren Vorschlag. Im Prinzip geht es um folgende Zeile:
    HTML-Code:
    <figure class="gimmick hidden-xs hidden-sm"><img class="img-responsive" src="{var:WebRoot}media/images/gimmick.png" alt="..."></figure>
    Dazu das passende CSS:
    Code:
    FIGURE.gimmick { position:absolute; animation:flowin 0.5s forwards;  }
    
    @keyframes flowin {
          0% { top:-500px; left:-300px; transform:rotate(-90deg); }
        100% { top:-175px; left:-100px; transform:rotate(-45deg); }
    }
    Das bewirkt halt nichts weiter, als dass das Bild in der linken oberen Ecke "eingedreht" wird. Wie gesagt, denke ich, dass das position:absolut; hier angebracht ist.


    Das Problem:
    ...ist, dass das Bild dadurch jetzt aber nicht auf img-responsive reagiert und somit schon bei mittleren Bildschirmauflösungen die Navi überdeckt. Mit z-index zu arbeiten hat mir in dem Fall auch nichts gebracht.


    Meine Frage:
    Denke ich an dieser Stelle verkehrt? Habt ihr bessere Ansätze?
    Ich würde also gerne, dass das Image wie gewollt oben links eingedreht wird, aber mit dem Viewport schrumpft bzw. wächst, wie es ein "normales" .img-responsive halt macht.

    Danke
    Competence-Center -> Enjoy the Informatrix
    PHProcks!Einsteiger freundliche Tutorials


  • #2
    Was steht denn in der Klasse img-responive drin?

    so funktioniert es zumindest:
    HTML-Code:
    <!DOCTYPE html>
    <html lang="de">
    
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
        main{ position:absolute;height:500px; width:500px;margin:200px; }
        figure.gimmick { position:relative; animation:flowin 0.5s forwards;  }
        .img-responsive { width:17vw; height:auto; }
        @keyframes flowin {
            0% { top:-500px; left:-300px; transform:rotate(-90deg); }
          100% { top:-175px; left:-100px; transform:rotate(-45deg); }
        }
        </style>
    </head>
    
    <body>
        <main>
            <figure class="gimmick hidden-xs hidden-sm">
                <img class="img-responsive" src="http://lorempixel.com/200/200/food" alt="...">
            </figure>
        </main>    
    </body>
    
    </html>
    

    Kommentar


    • #3
      Hi,

      Was steht denn in der Klasse img-responive drin?
      Das ist die Standard-Klasse von Bootstrap, nichts von mir.

      Aber die Einheit vw hat den Erfolg gebracht, die war mir nicht bekannt, ebenso wie vh und vmin/vmax, wie ich eben recherchiert habe.
      Genial, damit erschlagen sich auch ganz andere Sorgenkinder

      Danke für den Tipp!

      Competence-Center -> Enjoy the Informatrix
      PHProcks!Einsteiger freundliche Tutorials

      Kommentar


      • #4
        Hallo

        Ein Hinweis zu den Einheiten vw und vh, da es immer wieder zu Problemen bei der Anwendung kommt:

        vw und vh funktionieren anders als Prozentangaben. Kurz: 100 Prozent sind nicht immer 100 vw oder 100 vh.

        100 Prozent Breite bedeuten in einem Fenster den sichtbaren Bereich. Scrollbalken werden dabei berücksichtigt.

        100 vw bedeuten die gesamte Fensterbreite, also auch der Bereich unter Scrollbalken. Da die Scrollbalkenbreite nicht festgelegt ist kann damit der wirklich sichtbare Bereich praktisch kaum festgelegt werden. Speziell auch, wenn bei breiten Fenstern kein Scrollbalken erforderlich und sichtbar ist, bei schmaleren Fenstern aber eingeblendet wird.

        Gruss

        MrMurphy

        Kommentar


        • #5
          Danke für den Hinweis. Soll auch nicht zum Layouten verwendet werden, aber für so kleine Grafik-Gimmicks, wo es nicht auf einen Pixel Genauigkeit ankommt, passt das.
          Competence-Center -> Enjoy the Informatrix
          PHProcks!Einsteiger freundliche Tutorials

          Kommentar

          Lädt...
          X