gelöst Bilder in eigenem content mobil skalieren

Thema wurde von runa, 11. August 2016 erstellt.

  1. runa

    runa Mitglied

    Registriert seit:
    3. August 2016
    Beiträge:
    13
    Danke erhalten:
    0
    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?
     
  2. Dennis (MotivMonster.de)

    Dennis (MotivMonster.de) G-WARD 2013/14/15/16

    Registriert seit:
    22. September 2011
    Beiträge:
    30.948
    Danke erhalten:
    6.089
    Danke vergeben:
    1.078
    Beruf:
    Mann für alles :)
    Ort:
    Weilburg
    Man muss den Bildern die .img-responsive class zum <img> tag hinzufügen. Geht im CKeditor bei Formatklassen.
     
  3. runa

    runa Mitglied

    Registriert seit:
    3. August 2016
    Beiträge:
    13
    Danke erhalten:
    0
    Prima, Vielen Dank funktioniert :)
     
  4. Prosiki

    Prosiki Erfahrener Benutzer

    Registriert seit:
    29. März 2015
    Beiträge:
    48
    Danke erhalten:
    0
    Danke vergeben:
    13
    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:

    [​IMG]

    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?
     
  5. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    27. Mai 2016
    Beiträge:
    457
    Danke erhalten:
    98
    Danke vergeben:
    103
    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.
     
  6. Avenger

    Avenger G-WARD 2012/13/14/15

    Registriert seit:
    26. April 2011
    Beiträge:
    4.771
    Danke erhalten:
    1.478
    Danke vergeben:
    89
    Du hast ja noch den Inline-Style "height" in dem img, der überschreibt den CSS-Style.
     
  7. Prosiki

    Prosiki Erfahrener Benutzer

    Registriert seit:
    29. März 2015
    Beiträge:
    48
    Danke erhalten:
    0
    Danke vergeben:
    13
    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):

    [​IMG]

    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:

    [​IMG]
     
  8. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    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.
     
  9. Prosiki

    Prosiki Erfahrener Benutzer

    Registriert seit:
    29. März 2015
    Beiträge:
    48
    Danke erhalten:
    0
    Danke vergeben:
    13
    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?
     
  10. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    Versuche es mal mit max-Werten.
     
  11. Prosiki

    Prosiki Erfahrener Benutzer

    Registriert seit:
    29. März 2015
    Beiträge:
    48
    Danke erhalten:
    0
    Danke vergeben:
    13
    Hi!

    Meinst Du mit den max-Werten, dass in der CSS "max-width" auf 100 % stelle? Wenn ja, das habe ich schon.
     
  12. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    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
    :
     
  13. 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.

    upload_2016-11-24_17-4-51.png

    Danach auf " Erweitert klicken und wie auf dem Bild zu sehen einfach den img-responsive eintippen, Speichern und fertig

    upload_2016-11-24_17-6-32.png

    Somit kann man Bilder schnell responsive darstellen, aber wichtig ist das richtige Bild
     
  14. lotharschlaefer

    lotharschlaefer Erfahrener Benutzer

    Registriert seit:
    19. Juli 2013
    Beiträge:
    126
    Danke erhalten:
    3
    Danke vergeben:
    69
    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.
     
  15. michael_schaurer

    michael_schaurer Aktives Mitglied

    Registriert seit:
    25. Mai 2016
    Beiträge:
    38
    Danke erhalten:
    3
    Danke vergeben:
    5
    Hallo Zusammen,
    ich hab das gleiche Problem dass die Bilder nach img-responsive nicht mehr mittig ausrichtbar sind.
    weiss jemand voran das liegt ?
     
  16. michael_schaurer

    michael_schaurer Aktives Mitglied

    Registriert seit:
    25. Mai 2016
    Beiträge:
    38
    Danke erhalten:
    3
    Danke vergeben:
    5
    Habs geschafft. Einfach unter Bild Eigenschaften, Erweitert bei STIL folgendes eingeben:

    display: block; margin-left: auto; margin-right: auto;