Bilddatei responsive in Filter-Box machen

Thema wurde von TRC-Michael, 11. Dezember 2018 erstellt.

  1. TRC-Michael

    TRC-Michael Erfahrener Benutzer

    Hi Community,

    wir haben in unserem Gambioshop V3.11.1.2 in der Filter-Box eine Grafikdatei eingefügt. Diese ist 225px breit und für Desktop Ansichten okay. Hat jemand eine Idee wie man die Ausgabe auf 100% skalieren kann, sodass sich das PNG-Bild automatisch anpasst? Bei mobilen-Ansichten ist die Ausgabe zu klein und sieht iwie doof aus... o_O
     

    Anhänge:

  2. ReneT

    ReneT Erfahrener Benutzer

    beim einfügen wurden 220px fest eingeben... einfach 100% eingeben und die höhe löschen...
     
  3. TRC-Michael

    TRC-Michael Erfahrener Benutzer

    Jetziger Code:

    Code:
    <div id="filterbox-container"><p><img border="0" src="https://www.trc-tuning.com/images/trc/content/weathertech_partsfinder_trc1.png" width="220" height="198"></p>
    kann ich also width=100% eingeben, und height lass ich leer?
     
  4. ReneT

    ReneT Erfahrener Benutzer

    lass es doch mal auf einen Versuch ankommen... wer nichts wagt der nichts gew....
    Kaput machen kann man da nichts.
     
  5. Anonymous

    Anonymous Erfahrener Benutzer

    Code:
    <img class="img-responsive" src="https://www.trc-tuning.com/images/trc/content/weathertech_partsfinder_trc1.png">
    
     
  6. TRC-Michael

    TRC-Michael Erfahrener Benutzer

    schon klar :D

    Habe mal die Breite mit 100% deffiniert und keine Höhe, damit sich diese dann von selbst ergibt. Da das Bild 225px Breite hat wird es in der Desktop Version auch richtig angezeigt, jedoch ändert dies nichts an der Mobilen-Ansicht, wo das Bild gestreckt werden müsste. Vielleicht versuche ich es nochmals, wenn ich den Code bei 100% lasse und das Bild auf 400px oder so vergrößere.. mal testen o_O
     
  7. TRC-Michael

    TRC-Michael Erfahrener Benutzer

    Hat geklappt. Habe das Bild jetzt 400px breit gemacht, sodass es breiter als die Box ist, und auf 100% skalliert. Höhe habe ich keinen Wert deffiniert.

    Darstellung wird bei allen Ansichten automaatisch skalliert und sieht wunderbar aus. :cool:
     
  8. TRC-Michael

    TRC-Michael Erfahrener Benutzer

    daran hatte ich nicht gedacht. Das ist noch besser :D Danke für den Tip. Habe ich jetzt mal mit responsive gemacht und funktioniert genauso. Werde ich lassen. Macht einen besseren Eindruck als das Gewurstel mit 100% :D
     
  9. Anonymous

    Anonymous Erfahrener Benutzer

    bei einem responsiven Template, welches auf Bootstrap basiert, einfach nur mit den Mitteln des Frameworks arbeiten.

    Geht am einfachsten und du hast die ganzen Problem mit den Positionierungen nicht ...