Neu Fotos in die Artikelbeschreibung werden im Mobile Ansicht abgeschnitten

Balazs22

Mitglied
9. Juli 2021
27
2
Hallo,

in die Artikelbeschreibung (per Wawi) sind mehrere Fotos inseriert mit W 900px; H 373px. Auf Desktop-Browser sieht es aus sowie gewünscht, aber auf Mobilgeräte werden die Fotos nicht skaliert, sonst abgeschnitten.

Wie könnte ich dieses Problem lösen?

Anbei paar Fotos darüber.

Vielen Dank im Voraus!

LG
 

Anhänge

  • Bildschirmfoto 2022-07-12 um 17.39.41.png
    Bildschirmfoto 2022-07-12 um 17.39.41.png
    332 KB · Aufrufe: 8
  • Bildschirmfoto 2022-07-12 um 17.40.40.png
    Bildschirmfoto 2022-07-12 um 17.40.40.png
    294,2 KB · Aufrufe: 7
  • IMG_1449.png
    IMG_1449.png
    796 KB · Aufrufe: 7

Balazs22

Mitglied
9. Juli 2021
27
2
UPDATE:
Problem gelöst, die Bildgröße soll in % statt Pixel angegeben werden. Wenn B und H auf 100% eingestellt dann wird auch auf Händy alles angezeigt. Mit einem Link lässt sich vergrößern.
 

css-umsetzung

Offizieller Servicepartner
SPBanner
6. Juli 2011
5.202
995
Berlin
Das war die denkbar schlechteste Lösung.
solchen Bildern, die sich responsiv verhalten sollen gibt man unter Bootstrap 3 die Klasse img-responsiv oder unter Bootstrap 4 die Klasse img-fluid.

Diese Klassen überschreiben dann die width und height Werte die übergeben wurden.
 
  • Gefällt mir
Reaktionen: Balazs22

Balazs22

Mitglied
9. Juli 2021
27
2
Hallo, danke für deine Antwort!
Du hast Recht, meine Lösung war überhaupt nicht gut, weil wenn beide Größen 100% sind, dann sieht auf Händy gut aus, aber im Browser viel zu groß.

Welche werte sollte ich in bootstrap.css - Klasse img-fluid eingeben? Wenn ich die Standardwerte verwechsele passiert eh nichts.

}

.img-fluid {
max-width: auto;
height: 100%;
}

Es würde aber gut sein, wenn sich die Breite nach die Höhe einstellen würde, weil dann würden die Fotos sich auch im Mobile- und Browser Ansicht anpassen.
 

css-umsetzung

Offizieller Servicepartner
SPBanner
6. Juli 2011
5.202
995
Berlin
Die Klasse img-fluid ist in Bootstrap ja bereits hinterlegt, an der sollte auch nichts verändert werden.
Die Klasse sagt ja nur aus, das die maximale Breite 100% und die Höhe dann proportional angepasst wird.

Jetzt hast du da zwei Grafiken gemacht, ist soweit schon nicht schlecht aber &nbsp; und <br> ist nicht zum Formatieren gedacht.

Ich hätte es eher so gemacht:

HTML:
<div class="row">
    <div class="col col-12 col-md-6" style="margin-bottom:1.5rem;">
        <img alt="" src="/media/image/storage/opc/bora%20funktionen11.jpg" class="img-fluid">
    </div>
    <div class="col col-12 col-md-6" style="margin-bottom:1.5rem;">
        <img alt="" class="img-fluid" src="/media/image/storage/opc/bora%20funktionen12.jpg">
    </div>
</div>

Aber du hast da auf der Seite noch eine Menge anderer Probleme, die Seite hat responsiv so einige Fehler die du überarbeiten müsstest.
 
  • Gefällt mir
Reaktionen: Balazs22

Balazs22

Mitglied
9. Juli 2021
27
2
Danke, jetzt sieht schon alles sowie vorgestellt aus!

Die Produkte bearbeiten wir in Wawi per HTML-Editor. Gibt es eventuell im HTML-Editor auch eine Möglichkeit um das selbe Ergebnis zu erreichen? Diese bei jedes Produkt zu ändern würde eine menge Zeit nehmen.

Bezüglich die Behebung der Fehlern nahm ich schon Kontakt über eure Webseite auf!
 

Anhänge

  • Bildschirmfoto 2022-07-13 um 10.24.10.png
    Bildschirmfoto 2022-07-13 um 10.24.10.png
    538,2 KB · Aufrufe: 1
  • IMG_1456.png
    IMG_1456.png
    854,3 KB · Aufrufe: 1

css-umsetzung

Offizieller Servicepartner
SPBanner
6. Juli 2011
5.202
995
Berlin
Du könntest natürlich, um die Grundsätzlichen Probleme die Bilder in der Produktbeschreibung haben, diese über eine eigene style Angabe lösen um das vorab zu entschärfen.

So hättest du erst einmal Ruhe, solltest aber beim neuen Anlegen von Produkten die Klassen für Bilder passend hinterlegen.

CSS:
[data-page="1"] .desc img {
  max-width: 100%;
  height: auto;
}

Das da noch weitere Probleme bestehen war bezogen auf das zweite untere Bild und den Footer.

Wenn du den style Code mit meinem Code erweiterst, die Bilder im Footer auch mit der img-fluid Klasse versiehst, dann sollte der Footer auch passen, dann brauchst du mich nicht für die Überarbeitung.
 
Ähnliche Themen
Titel Forum Antworten Datum
Android App "Foto aufnehmen"-Funktion erstellt nur Fotos mit winziger/unbrauchbarer Auflösung (20 kb Dateigröße) JTL-Wawi 1.6 0
Neu Darstellung der Artikelliste fehlen die Funktionen JTL-Wawi 1.6 0
Neu Ameise Lieferantenbestand CSV - .bat skript startet die Ameise nicht User helfen Usern - Fragen zu JTL-Wawi 0
Anzahl Artikel in der Kategorieseite (productlist) einstellen, bevor die Pagination greift Einrichtung JTL-Shop5 0
Neu Workflow - wie ist die Arbeitsweise ? User helfen Usern - Fragen zu JTL-Wawi 6
Versandart für Amazon FBA Aufträge - Wo wird die eingestellt / zugeordnet ? JTL-Wawi 1.6 1
Neu Zebra ZD621 verliert immer mal wieder die Netzwerkverbindung User helfen Usern 2
Artikel automatisch auslisten/Löschen die der Großhandel nicht mehr hat JTL-Wawi 1.6 2
Neu E-Mail Adressen von Kunden werden nicht in die WAWI importiert eBay-Anbindung - Fehler und Bugs 1
Neu Amazon Verkäuferkonto freigeschaltet - Produkte in JTL eingspielt, nun die Frage, 50.000 Artikel wie bekommt man diese mit EAN und teils ohne EAN Amazon-Anbindung - Ideen, Lob und Kritik 5
Neu Bestellung im Shop wird nicht an die JTL-WAWI gesendet User helfen Usern - Fragen zu JTL-Wawi 0
Neu Gutschrift Vorlage, wieso werden die Beträge 3mal ausgegeben? User helfen Usern - Fragen zu JTL-Wawi 0
Rechnung 10% von gewinn auf die Rechnung JTL-Wawi 1.6 8
Neu Seit 19.09.22 funktioniert die Amazon.com Anbindung (USA) nicht mehr. Ticket eröffnet - keine Reaktion :-( Amazon-Anbindung - Fehler und Bugs 0
Neu Ich suche eine Variable für die Kundenkategorie Allgemeine Fragen zu JTL-Shop 0
In Bearbeitung POS Nachträglich die Zahlungsart ändern. JTL-POS - Ideen, Lob und Kritik 1
Neu Vorlagen, die gespeichert oder gemailt werden, lassen sich nicht öffnen Druck-/ E-Mail-/ Exportvorlagen in JTL-Wawi 0
Neu Geringe Zustellungsrate bei Newsletter die an t-online.de Email Adressen versendet werden User helfen Usern 7
Neu Wann kommt in der 1.6 die Amazon Anbindung Belgien? Amazon-Anbindung - Fehler und Bugs 2
Neu Export Schweiz: Bitte geben sie die Beschreibung an JTL-ShippingLabels - Fehler und Bugs 2
Neu Wo sind die Unterkategorien im Shopify-Shop? Shopify-Connector 5
Neu Mit der Suche nur die Vaterartikel anzeigen lassen? Allgemeine Fragen zu JTL-Shop 0
Neu TIPP: Artikel markieren die bei Kaufland eingestellt sind User helfen Usern - Fragen zu JTL-Wawi 0
Neu Erstellung von detaillierten Artikelauswertungen für die Weinhandelskontrolle Schnittstellen Import / Export 0
Neu Anhänge zum Auftrag bzw. zur Rechnung an die Ausgangsmail hängen User helfen Usern - Fragen zu JTL-Wawi 2
Neu Token für die MWS-Autorisierung aktualisiert / nicht alle Bestellungen sind in der WAWI angekommen Amazon-Anbindung - Fehler und Bugs 2
Consent-Manager ID ist das eine JTL Shop ID oder die Youtube API Id oder eine Drittanbieter ID? Einrichtung JTL-Shop5 0
Neu Worauf bezieht sich die Artikelanzahl für ein gebuchtes Paket? JTL-Track&Trace - Ideen, Lob und Kritik 3
Beantwortet JTL1.6 Wo finde ich die Lieferadresse in der SQL DB ? User helfen Usern - Fragen zu JTL-Wawi 9
Neu Webshop Abgleich bringt Fehler Das Remotezertifikat ist laut Validierungsverfahren ungültig. Die zugrunde liegende Verbindung wurde geschlossen:..... JTL-Wawi - Fehler und Bugs 2
Neu Warum sehen die Links so selsam aus? User helfen Usern 1
Neu sind die URLs der Suchspecials bzw. $Box->cURL der Startseiten-Boxen fix oder gibt es eine Sprachvariable hierfür Templates für JTL-Shop 2
Neu Wo kann ich die Farbe anpassen? Templates für JTL-Shop 2
Neu Was macht die Performanceoptimierung User helfen Usern - Fragen zu JTL-Wawi 3
Unterschiedlichen Kategorieseiten auf die gleiche URL verlinken ohne Seiten zu duplizieren? Upgrade JTL-Shop4 auf JTL-Shop5 0
Wo ist die Artikelbeschreibung in der Artikelliste? Einrichtung JTL-Shop5 1
Neu Artikel lassen sich nicht öffnen " Die Sequenz enthält mehrer übereinstimmende Elemente" JTL-Wawi - Fehler und Bugs 1
Neu Jeden Monat die Topkunden ermitteln mit JTL Wawi Rangliste User helfen Usern - Fragen zu JTL-Wawi 0
Neu Die Beschreibung des Merkmalwert wird nicht gespeichert User helfen Usern - Fragen zu JTL-Wawi 2
Neu Mir unbekannte Auftragsattribute - wozu? Können die gelöscht werden? User helfen Usern - Fragen zu JTL-Wawi 1
Neu Nur Ware bei Amazon listen die im eigenen Lager liegt Einrichtung und Installation von JTL-eazyAuction 15
Neu Kunden aus POS werden nicht in die Wawi übertragen Arbeitsabläufe in JTL-Wawi 2
Neu Coupons OHNE die bezahlbare JTL Variante umsetzen Allgemeine Fragen zu JTL-Shop 35
Neu Variablen für Pickliste, die einen Artikel-Bestand auf einem Lagerplatz anzeigen? Druck-/ E-Mail-/ Exportvorlagen in JTL-Wawi 0
Neu Die beste Logistik? JTL-ShippingLabels - Ideen, Lob und Kritik 2
JTL <-> Gambio .. geänderte Artikel werden bei Gambio in die Kategorie "TOP" geschoben, obwohl bei JTL richtige Kategorie angegeben ist.. :-(I JTL-Wawi 1.6 0
Neu Hotfix von 5.1.2 auf 5.1.4 zeigt noch die alte Version im Backend an. Installation / Updates von JTL-Shop 2
Neu Button für Weiter einkaufen soll den Kunden zurück in die Artikelliste führen Betrieb / Pflege von JTL-Shop 7
Neu [Email / DKIM] Wo setzt man "Content-Transfer-Encoding" für die Mail-Vorlagen im Shop 4? Einrichtung von JTL-Shop4 3
Verwiesen an Support JTL Wawi Artikel öffnen: Die Sequenz enthält mehrere übereinstimmende Elemente. JTL-Wawi - Fehler und Bugs 1

Ähnliche Themen