Bilder "responsive" einbinden (mobile Endgeräte)

HQS Shop

Aktives Mitglied
26. April 2016
20
2
Hallo ich habe folgendes Problem, wenn ich über die WAWI Bilder in der Artikelbeschreibung einfüge und diese dann auf dem Handy ansehen möchte sind diese viel zu groß.

Kann mir jemand sagen was ich machen muss damit diese auf jedes Endgerät passend verkleinert werden?

Danke
 

martinwolf

Offizieller Servicepartner
SPBanner
6. September 2012
3.477
289
AW: Bilder "responsive" einbinden (mobile Endgeräte)

Dem Bild eine Klasse "img-responsive" mitgeben.
 

martinwolf

Offizieller Servicepartner
SPBanner
6. September 2012
3.477
289
AW: Bilder "responsive" einbinden (mobile Endgeräte)

img-thumbnail macht aber auch nichts außer einen Rahmen bzw. eine Runde Form um das Bild zeichnen. Responsive skaliert das Bild dadurch nicht.

Ich verstehe den TO so, als dass die Bilder in der Beschreibung größer sind als das Display hergibt und diese demnach aus dem Display herauslaufen. img-responsive verhindert das, img-thumbnail nicht.
 

HQS Shop

Aktives Mitglied
26. April 2016
20
2
AW: Bilder "responsive" einbinden (mobile Endgeräte)

Hammer geil!

Hat 1A funktioniert mit diesem Code: <img class="img-responsive" src="img_chania.jpg" alt="Chania">

Man muss einfach nur das
class="img-responsive" einfügen dann klappt es.

Vielen Dank für die schnelle Antwort.
 

Gauj:jo

Aktives Mitglied
2. März 2013
64
3
Beiersdorf
Firma
Beiersdorfer Möbelwerk GmbH
Hallo,

ich habe gerade den Shop neu installiert und habe das gleiche Problem. Also die Bilder auf der Startseite passen sich mobil nicht an - gehen also über den Rand hinaus.
Meine Frage ist nur, wo ich genau das img-responsive einfüge in welcher Datei auf dem Server?

Vielen Dank für die Hilfe
 

MichaelH

Sehr aktives Mitglied
17. November 2008
14.175
1.774
Im Backend, dort wo du den Text und Bilder für deine Startseite eingegeben hast.
Im Editor kannst du dort "Quellcode" anklicken, dann sieht du den.
Dort suchst du nach <img (siehe oben) und schreibst innerhalb des <img ....> das class="img-responsive" dazu.
 

Dave70

Aktives Mitglied
1. März 2018
19
3
Hallo Zusammen, vielen Dank für die super Tipps, hat mit den Bildern geklappt, gibts auch einen Code für TEXT "responive"?

Vielen Dank für eine Rückmeldung.
 

Dave70

Aktives Mitglied
1. März 2018
19
3
Du solltest das Problem das du hast lieber zeigen da hier viel zu viele Bedingungen und Formatierungen eine Rolle spielen.
Hallo Vielen Dank für deine Rückmeldung in der Startseite habe ich folgendes eingegeben:
... in der Mobileversion wird es aber nicht angepasst, was sollte ich ändern?

<table border="0" cellpadding="1" cellspacing="1">
<thead>
<tr>
<th scope="col">Handstretchfolie</th>
<th scope="col">Maschinenstretchfolie</th>
<th scope="col">Bündelstretchfolie</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="https://stretchme.ch/stretchfolie"><img alt="Handstretchfolie | stretchme.ch" class="img-responsive" src="/mediafiles/Bilder/hand-stretchfolie-transparent-17-20-23-my-online-kaufen-stretchme-nicopac.jpg" /></a></td>
<td><a href="https://stretchme.ch/maschinenstretchfolie_3"><img alt="Maschinenstretchfolie | stretchme.ch" class="img-responsive" src="/mediafiles/Bilder/maschinestretchfolie-transparent-17-20-23-my-online-kaufen-stretchme-nicopac.jpg" /></a></td>
<td><a href="https://stretchme.ch/buendelstretchfolie-guenstig-onlinekaufen"><img alt="Bündelstretchfolie | stretchme.ch" class="img-responsive" src="/mediafiles/Bilder/buendel-mini-handy-hand-stretchfolie-transparent-17-20-23-my-online-kaufen-stretchme-nicopac.jpg" /></a></td>
</tr>
<tr>
<td></td>
</tr>
</tbody>
</table>
 

css-umsetzung

Offizieller Servicepartner
SPBanner
6. Juli 2011
7.228
1.961
Berlin
Wie ich schon schrieb,
So kann dir keiner helfen, denn der HTML Code ist hier fast schon das unwichtigste, viel wichtiger ist das aktive CSS in den jeweiligen Auflösungen und das kannst du uns auch posten aber das wird nichts nutzen da sich niemand hinsetzt und das nachbaut um das zu testen.

Ein Link zum Problem und es ist vermutlich in 10 Minuten gelöst weil man das in den einzelnen Auflösungen gut in der Console prüfen kann.
So jedenfalls wirst du keinen wirklichen Lösungsansatz bekommen.
 

css-umsetzung

Offizieller Servicepartner
SPBanner
6. Juli 2011
7.228
1.961
Berlin
Wie schon angesprochen, arbeitet ein Text im Idealfall selbst den Verhältnissen an und bricht um wenn es erforderlich ist.
In einer Tabelle kann das aber unschön enden, insbesondere wenn man wie du ohne padding arbeitet, bzw. versucht drei Elemente bei einer Breite von 340px nebeneinander darzustellen.

Der Shop verwendet Bootstrap 3, was ein ordentliches Grid System mit sich bringt, dass solltest du nutzen.

Ich habe dir mal einen Code zusammengestellt der dir veranschaulicht wie es aussehen könnte, du wirst schnell den Unterschied sehen und dich dann am besten etwas in Bootstrap einlesen, was ich da gemacht habe ist kein Hexenwerk udn leicht verständlich denke ich.

Teste das mal aus:
HTML:
<div class="row text-center">
    <div class="col-xs-12 col-sm-6 col-md-4">
        <a href="https://stretchme.ch/stretchfolie"><b>Handstretchfolie</b>
            <img alt="Handstretchfolie | stretchme.ch" class="img-responsive center-block"
                src="/mediafiles/Bilder/hand-stretchfolie-transparent-17-20-23-my-online-kaufen-stretchme-nicopac.jpg"
        /></a>
    </div>
    <hr class="visible-xs-block" style="margin:15px; clear:both">
    <div class="col-xs-12 col-sm-6 col-md-4">
        <a href="https://stretchme.ch/maschinenstretchfolie_3"><b>Maschinenstretchfolie</b>
            <img alt="Maschinenstretchfolie | stretchme.ch" class="img-responsive center-block"
                src="/mediafiles/Bilder/maschinestretchfolie-transparent-17-20-23-my-online-kaufen-stretchme-nicopac.jpg"
        /></a>
    </div>
    <hr class="visible-xs-block visible-sm-block" style="margin:15px; clear:both">
    <div class="col-xs-12 col-md-4">
        <a href="https://stretchme.ch/buendelstretchfolie-guenstig-onlinekaufen"><b>Bündelstretchfolie</b>
            <img alt="Bündelstretchfolie | stretchme.ch" class="img-responsive center-block"
                src="/mediafiles/Bilder/buendel-mini-handy-hand-stretchfolie-transparent-17-20-23-my-online-kaufen-stretchme-nicopac.jpg"
        /></a>
    </div>
</div>
 
  • Gefällt mir
Reaktionen: Dave70

Dave70

Aktives Mitglied
1. März 2018
19
3
Hallo ...

Super hat bestens geklappt, aber wie du mir empfohlen hast werde ich in Zukunft mit Bootstrap es lösen :)
 
Ähnliche Themen
Titel Forum Antworten Datum
Neu Fehlende Bilder JTL zu WooCommerce Englishe Sprache WPML Onlineshop-Anbindung 0
Neu SQL Query zum Bilder löschen Arbeitsabläufe in JTL-Wawi 3
Bilder umbenennen JTL-Wawi 1.9 1
Bilder importieren JTL-Wawi 1.9 1
Neu Artikelübersicht zeigt 2 Bilder pro Artikel oder leeren Rahmen Allgemeine Fragen zu JTL-Shop 5
Nummernliste der Bilder in mobiler Ansicht entfernen Einrichtung JTL-Shop5 8
Nur bestimmte Bilder für einen Marktplatz aktivieren (Hood.de) JTL-Wawi 1.8 2
Neu Bilder für alle Plattformen verwenden User helfen Usern - Fragen zu JTL-Wawi 8
Hochkant Bilder werden nicht vollständig angezeigt JTL-Wawi 1.8 0
Neu Nach Komplettabgleich doppelt und dreifache Bilder? WooCommerce-Connector 6
Neu Bilder ohne Extension übertragen Shopware-Connector 0
Neu IP Sperre beim Versuch Bilder zu downloaden Allgemeine Fragen zu JTL-Shop 2
Neu Bei VarKombi-Artikeln, wie immer eine Farbe und Größe vorauswählen, damit alle Bilder angezeigt werden? Allgemeine Fragen zu JTL-Shop 4
Neu WMS Mobile zeigt keine Bilder an JTL-WMS / JTL-Packtisch+ - Fehler und Bugs 0
Bilder werden nicht auf WMS mobile angezeigt JTL-WMS / JTL-Packtisch+ - Fehler und Bugs 0
Neu JTL Google Shopping Plugin - Bilder Updaten Plugins für JTL-Shop 3
Neu Gibt es eine Möglichkeit zu große Bilder zu verbieten? User helfen Usern - Fragen zu JTL-Wawi 5
Bilder in den Artikelstammdaten aktivieren und erneut senden JTL-Wawi 1.9 3
Neu Bilder sind mobil im fullscreen zu klein Betrieb / Pflege von JTL-Shop 4
Neu Google Bilder Bot Zugriff auf /dbeS/bild.php?a=1375538&n=1&url=0&s=0 Allgemeine Fragen zu JTL-Shop 3
Variationsertikel erstellen und in Woocommerce einbinden JTL-Wawi 1.9 4

Ähnliche Themen