Bilddatei responsive in Filter-Box machen

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

  1. TRC-Michi

    TRC-Michi Erfahrener Benutzer

    Registriert seit:
    14. Oktober 2014
    Beiträge:
    217
    Danke erhalten:
    21
    Danke vergeben:
    22
    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

    Registriert seit:
    1. Dezember 2016
    Beiträge:
    708
    Danke erhalten:
    232
    Danke vergeben:
    67
    beim einfügen wurden 220px fest eingeben... einfach 100% eingeben und die höhe löschen...
     
  3. TRC-Michi

    TRC-Michi Erfahrener Benutzer

    Registriert seit:
    14. Oktober 2014
    Beiträge:
    217
    Danke erhalten:
    21
    Danke vergeben:
    22
    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

    Registriert seit:
    1. Dezember 2016
    Beiträge:
    708
    Danke erhalten:
    232
    Danke vergeben:
    67
    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

    Registriert seit:
    26. April 2011
    Beiträge:
    993
    Danke erhalten:
    208
    Danke vergeben:
    100
    Code:
    <img class="img-responsive" src="https://www.trc-tuning.com/images/trc/content/weathertech_partsfinder_trc1.png">
    
     
  6. TRC-Michi

    TRC-Michi Erfahrener Benutzer

    Registriert seit:
    14. Oktober 2014
    Beiträge:
    217
    Danke erhalten:
    21
    Danke vergeben:
    22
    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-Michi

    TRC-Michi Erfahrener Benutzer

    Registriert seit:
    14. Oktober 2014
    Beiträge:
    217
    Danke erhalten:
    21
    Danke vergeben:
    22
    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-Michi

    TRC-Michi Erfahrener Benutzer

    Registriert seit:
    14. Oktober 2014
    Beiträge:
    217
    Danke erhalten:
    21
    Danke vergeben:
    22
    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

    Registriert seit:
    26. April 2011
    Beiträge:
    993
    Danke erhalten:
    208
    Danke vergeben:
    100
    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 ...