Bilder "responsive" einbinden (mobile Endgeräte)

HQS Shop

Aktives Mitglied
26. April 2016
18
0
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.385
263
AW: Bilder "responsive" einbinden (mobile Endgeräte)

Dem Bild eine Klasse "img-responsive" mitgeben.
 

martinwolf

Offizieller Servicepartner
SPBanner
6. September 2012
3.385
263
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
18
0
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
13.831
1.547
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
6.714
1.615
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
6.714
1.615
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 Bilder Import über die Ameise JTL-Ameise - Fehler und Bugs 8
Neu Bilder-Verzeichnis anpassen WooCommerce-Connector 1
Neu Dateinamen Bilder Export festlegen? JTL Ameise - Eigene Exporte 5
Neu Shopware 5 Bilder werden nicht übertragen nach Update auf Wawi 1.7.15.6 Shopware-Connector 0
Neu Automatische Sortierung der Bilder & Anzahl der Ebay Bilder eBay-Anbindung - Fehler und Bugs 0
Neu Es werden nur jpg Bilder angezeigt und keine webP Gelöste Themen in diesem Bereich 3
Neu Export CSV Datei inkl. Bilder Schnittstellen Import / Export 1
Neu beim Umstieg von unicorn auf SCX Bilder aktivieren Otto.de - Anbindung (SCX) 1
Neu Kategorie Bilder werden im Webshop nicht angezeigt User helfen Usern - Fragen zu JTL-Wawi 3
Neu Bilder von Merkmalen werden nicht angezeigt Gelöste Themen in diesem Bereich 5
Versuch Bilder aus Ebay für Kaufland zu übernehmen JTL-Wawi 1.8 0
Bilder Upload und Fehlermeldung WooCommerce-Connector 0
Neu Bilder werden Falsch im Shop angezeigt. WooCommerce-Connector 0
Neu Bilder öffnen sich in mobiler Version fehlerhaft. Allgemeine Fragen zu JTL-Shop 0
Neu Bilder für Kindartikel Gelöste Themen in diesem Bereich 4
Neu Bilder unter "Mehr dieser Waregruppe" und "Kunden, die diesen Artikel gekauft haben, kauften auch" fehlen eBay-Designvorlagen - Fehler und Bugs 0
Neu Amazon Lister übergibt nur das Hauptbild an Amazon, weiter Bilder werden nicht übertragen Amazon-Lister - Fehler und Bugs 0
Neu Wie kann ich Alt-Texte für Bilder an Shopify senden? Shopify-Connector 2
Neu Connector überträgt keine Bilder Shopify-Connector 1
Neu webp-Bilder werden nicht mehr generiert JTL-Shop - Fehler und Bugs 0
Neu Einstellung: "Bilder des Vaterartikels un der folgenden Variationswerte übernehmen" und der Shopware Server "explodiert" Shopware-Connector 11
Neu Bilder werden teilweise in verschiedenen Browser falsch dargestellt Gelöste Themen in diesem Bereich 3
Neu Neues Plugin: Hersteller Slider Portlet (Zentrierungs- oder Schwarz/Weiß-Modus, Responsive Anpassung..) inkl. 5 kostenlosen Lizenzen Plugins für JTL-Shop 4
Neu ein email formular auf startseite einbinden Allgemeine Fragen zu JTL-Shop 0

Ähnliche Themen