Hallo, ich habe einige Bilder in einer eigenen Content Seite eingebaut. Mobil werden diese Bilder aber leider nicht kleiner skaliert. Muss ich da irgend etwas beachten?
Man muss den Bildern die .img-responsive class zum <img> tag hinzufügen. Geht im CKeditor bei Formatklassen.
Hallo in die Runde! Ich habe auch ein Problem mit der responsiven Darstellung der Bilder auf einem mobilen Gerät. Ich habe zwar die CSS-Klasse "img-responsive" zugewiesen, doch es hat sich nichts getan. Vorweg: Ich habe zur Sicherheit eine Usermod-Klasse angelegt, damit ich nicht im Hauptcode herumpfuschen muss. Mein "bild-responsive" sieht so aus: Code: .bild-responsiv { max-width: 100%; height: auto; } Füge ich die Klasse bei den Bildern im Text ein, ist die Breite super skaliert, aber die Höhe ist noch ursprünglich, das Bild also furchtbar gequetscht. Das Stauchen bekomme ich aber weg ... allerdings muss ich da etwas am HTML-Code ändern, den Gambio selbsterstellt: Oben seht Ihr den Code wie er wirklich funktioniert, unten seht Ihr den Code, der nur durch die Klasse ergänzt wird. Der Unterschied und wie ich es "zum Laufen" gebracht habe: Ich habe beim oberen Code die Höhen- und Breitenangaben aus dem "Style-Block" geholt und einzeln angegeben. So funktioniert meine Klasse und die Bilder werden auch auf dem Handy perfekt angezeigt. Mein Problem: Gambio packt die Höhe und Breite doch automatisch in die Style-Angaben. Soll ich wirklich händisch überall diese nun rausholen? Oder woran liegt es?
Moin Prosiki, du kannst deine eigene Klasse löschen, du brauchst nur die Klasse img-responsive das CSS ist dafür schon implementiert.... und skaliert die Bilder automatisch auf die volle Größe. Dann musst du immer wie in deinem 2. Beispiel die festen Werte width:350px und height:533px löschen damit sie auch responsive sind.
U. a. krankheitsbedingt komme ich leider erst jetzt zum Antworten, Nachfragen und mich für die erste Hilfe Bedanken. Für die meisten Bilder passt es wirklich, wenn ich einfach die Größen rausnehme. Danke! Allerdings gibt es eine Art von Bilder, die ohne Größenangaben aber noch ein wenig zicken: Bilder mit umgebenden Text. Mein Beispiel (ein Vorher-Bild noch mit Größenangaben): Bei diesem Bild wurde ein wenig an den Dimensionen gedreht, damit es einfach besser ins Layout passt. Ihr könnt Euch denken, was passiert, wenn ich diese Größenangaben rausnehme: Genau, das Bild rutscht einfach in die Originalgröße und das Layout ist im Grunde für die Katz. Einen Weg, das zu verhindern, kenne ich natürlich: Das Bild noch vor dem Hochladen auf die richtige Größe zuschneiden. Ist das aber der einzige Weg? Oder kann Gambio damit nicht irgendwie umgehen? Responsiv UND neue Größen? Geht gar nicht? Denn, wie Ihr eben schon angedeutet hat, "img-responsive" und Größenangaben harmonieren gar nicht in der Mobilansicht:
Entweder du legst das Bild für jede Auflösung in der gewünschten Größe an, Im Forum stand dazu irgendwo dieser Code: HTML: <img src="img/testbild4_320.jpg" title="Testbild" alt="Testbild" data-image-xs="img/testbild4_320.jpg" data-image-sm="img/testbild4_640.jpg" data-image-md="img/testbild4_1024.jpg" data-image-lg="img/testbild4_1600.jpg"/> Oder Du nimmst das class=img-responsive, dann verkleinert der Shop das entsprechend.
Bei meinem Handy-Screenshot ist diese Klasse aktiviert! Da verzerrt es nur. Und wenn ich keine Größen angebe, wird es in der PC-Ansicht zu groß und unpassend. Oder habe ich etwas falsch verstanden?
Hi! Meinst Du mit den max-Werten, dass in der CSS "max-width" auf 100 % stelle? Wenn ja, das habe ich schon.
Nein. Wenn Du mit "class="img-responsie"" arbetien möchtest, musst Du dem Shop auch die Möglichkeit geben, die Größe anzupassen. Du hast aber so etwas wie hier beschreiben: damit sagst du dem Shop "ich will dass das Bild so groß ist" Entweder Du nimmst die Werte ganz raus und lädst das Bild in der gewünschten Größe hoch (350 x 533px) oder Du sagst dem Shop "das Bild sollte maximal 350 x 533px groß sein", in dem Du den Code auf max-width: 350px und max-heigt:533px änderst :
Das Problem liegt einfach daran, das wenn Bilder keine Norm haben wird das auch nichts mit einer sauberen responsive Ansicht. Am besten gehen da Bilder mit z.B. 500x500 Pixel oder das bekannte Fotoformat 4x3. Hat man nun ein Bild mit einer Breite von 300px und einer Höhe von 800px kann daraus nie ein sauberes responsives Bild entstehen. Daher sind richtige Grundbilder die Voraussetzung für ein sauberes und ansehnliches Bild auf Mobilen Endgeräten. Als Tipp noch von mir: Bei einzelnen Bilder erst gar nicht anfangen mit CSS und Quellcode zu arbeiten. Einfach auf Bild einfügen. Danach auf " Erweitert klicken und wie auf dem Bild zu sehen einfach den img-responsive eintippen, Speichern und fertig Somit kann man Bilder schnell responsive darstellen, aber wichtig ist das richtige Bild
Hallo Zusammen, ich hätte noch eine andere Frage. Ich habe es geschafft, dass es immer angepasst wird in der Mobilansicht, jedoch kann ich die Bilder jetzt nicht mehr mittig also zentriert in der Mitte, sodass der Abstand links und rechts gleich ist, einstellen. Kann mir hier jemand helfen? Danke.
Hallo Zusammen, ich hab das gleiche Problem dass die Bilder nach img-responsive nicht mehr mittig ausrichtbar sind. weiss jemand voran das liegt ?
Habs geschafft. Einfach unter Bild Eigenschaften, Erweitert bei STIL folgendes eingeben: display: block; margin-left: auto; margin-right: auto;