Bilder auf der Startseite responsive darstellen

Thema wurde von wurmi023, 15. Oktober 2016 erstellt.

  1. wurmi023

    wurmi023 Erfahrener Benutzer

    Registriert seit:
    24. August 2012
    Beiträge:
    419
    Danke erhalten:
    30
    Danke vergeben:
    46
    Ich arbeite gerade am neuen Honeygrid Design und nehme als Anhaltspunkt den Testshop 1.

    Nun wollte ich gern, wie auch im Testshop 1 als erstes 3 kleine Grafiken in den Content "Index" einfügen. Habe mir die Maße der Bilder im Testshop angeschaut und so übernommen und 3 Grafiken in PS erstellt. Diese hab ich dann hochgeladen im Contentmanager.
    Ob es responsive dargestellt wird bzw. funktioniert, teste ich immer, indem ich meine Seitenleiste im Browser einblende und ausblende.

    Im Testshop sind die Bilder immer nebeneinander und werden kleiner, wenn man weniger Platz zum Anzeigen hat. Bei mir im Shop bleiben die Bilder immer gleich groß und werden dann halt untereinander geschoben, wenn alle drei nicht mehr hin passen. Nun habe ich aufgrund Dennis´ Tipp hin mir die CSS Klasse angeschaut und diese ist im Testshop bei "Erweitert -> Formatvorlagenklasse" eingetragen.

    Ich habe mir die Klasse angeschaut und raus kopiert, daraus habe ich mir dann auch eine "img-responsive.css" angelegt und sie in "templates/honeygrid/usermod/css" rein gelegt, da ich der Meinung bin, da kommt es rein.

    Lange Rede, kurzer Sinn: Es klappt so nicht. Die Bilder bleiben immer gleich groß und werden nicht responsive verändert, wenn der Bildschirm kleiner wird.
     
  2. Anonymous

    Anonymous G-WARD 2015/2016

    Registriert seit:
    20. Februar 2012
    Beiträge:
    8.755
    Danke erhalten:
    1.516
    Danke vergeben:
    1.051
    ich habe das mit 2 Bildergrößen gelöst:

    Code:
    <img class="img-responsive space-1" data-image="images/content/index/sale-1.png" data-image-lg="images/content/index/sale-1.png" data-image-xs="images/content/index/sale-small.png" src="images/content/index/sale-1.png" />
    wenn Bilder auf dem Handy gar nicht angezeigt werden sollen, muss ein: class="hidden-xs" rein
     
  3. wurmi023

    wurmi023 Erfahrener Benutzer

    Registriert seit:
    24. August 2012
    Beiträge:
    419
    Danke erhalten:
    30
    Danke vergeben:
    46
    Die Klasse "img-responsive" scheint ja serienmäßig zu existieren. Wenn ich diese Klasse da eintrage, dann sind alle Bilder untereinander...
     
  4. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    27. Mai 2016
    Beiträge:
    457
    Danke erhalten:
    98
    Danke vergeben:
    103
    #4 Anonymous, 17. Oktober 2016
    Zuletzt bearbeitet: 24. Oktober 2016
    folgenden Code mal als Beislpiel platzieren

    --------------------------------------------------
    Code:
    <style type="text/css">
    
    
    .container-rs{
    max-width:1300px;
    margin-left:auto;
    margin-right:auto;
    
    }
    
    
    @media screen and (max-width:1000px){
    
    .container-rs{
    max-width:390px;
    margin-left:auto;
    margin-right:auto;
    
    }
    
    }
    
    </style>
    <div class="container">
    <div class="container-rs">
    <!--image1--->
    <div class="col-md-4" style="padding-right:0; float:left;">
    <a href="/deine-kategorie-link-url.html">
    <img class="img-responsive" src="https://www.gambio-shop.de/shop4/images/content/index/kategorie-kleid.png" /></a></div>
    <!--image2--->
    <div class="col-md-4" style="padding-right:0; float:left;">
    <a href="/deine-kategorie-link-url.html">
    <img class="img-responsive" src="https://www.gambio-shop.de/shop4/images/content/index/kategorie-computer.png" /></a></div>
    
    <!--image3--->
    <div class="col-md-4" style="padding-right:0: float:left;">
    <a href="/deine-kategorie-link-url.html">
    <img class="img-responsive" src="https://www.gambio-shop.de/shop4/images/content/index/kategorie-ballon.png" /></a></div>
    </div>
    <br />
    </div>
    
    --------------------------------------------------