Neu Fotos in die Artikelbeschreibung werden im Mobile Ansicht abgeschnitten

[Balazs22]

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

 

[Balazs22]

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]

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.

 

[Balazs22]

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]

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:

<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.

 

[Balazs22]

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!

 

[css-umsetzung]

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.

[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.