Responsive Bilder auf smartphone zu groß

    Meine Joomla Version Joomla! 3.9.4 Stable [ Amani ] 12-March-2019 15:00 GMT

    PHP Version: 7.2.17

    Template: purity iii

    http://win-neustetten.de/personen


    Guten Abend,

    die Bilder / Passfotos auf der Page (link siehe oben) werden im Browser korrekt angezeigt. Aber auf dem smartphone sind diese Bilder riesig (füllen die ganze Breite aus).

    Gibts eine Möglichkeit, die Bilder dort kleiner anzuzeigen ?

    VG Anja

    zunächst einmal würde ich die Grundgröße der Bilder ändern. Du stellst Bildgrößen ein, mit der man tapezieren könnte. Ein Foto pro Wand. Das Gruppenbild alleine hat 4MB! Das ist viel zu riesig. Du hast es ja auf 600px Höhe skaliert. Die Ladezeiten werden mit dem Smartphone ewig dauern, mit dem Ergebnis das die Besucher wegbleiben... aber gut, das ist ja jetzt ne Grundsatzfrage ... vielleicht ist das ja auch gewollt.

    Bei den Passbildern würde ich das aber definitiv machen und die Originalgörße auf die "skalierte" Größe anpassen

    Dann nochmal schauen, ob es vielleicht schon passt.

    Ansonsten musst du mit CSS arbeiten. Das purity kenn ich so nicht, aber du musst dann die responsive Angaben ändern...

    Guten Tag,


    ich hab jetzt mal eines der Passbilder kleiner gemacht / geladen. Aber die Anzeige aufm Handy ist leider immer noch so groß, dazu noch unscharf.


    In der custom.css hab ich dazu im Moment folgendes drin:


    .responsive {

    max-width: 100% !important;

    height: auto%;

    }


    Wenn ich das auf "width 100% !important" ändere, dann wird es auch auf dem großen Bildschirm größer angezeigt. Ebenfalls unscharf.

    Gibts ne Möglichkeit die custom.css einfach dafür zu ändern ? Oder muss ich in eine andere Tabelle ?


    VG Anja

    Hallo Anja,


    nachdem die CSSen kompiliert sind, ist es da schwierig (für mich) da richtig ranzukommen.


    Ladezeiten sind enorm usw. Wurde aber bereits schon oben gesagt. Screenshot #5 hat immer noch Wirkung. Probiers mit (in die custom.css):


    CSS
    article img, .article-intro img, article {
width:auto !important;  
}

    so, dann bin ich wieder. Durch diese Portraits Klickerei, CSSen usw. hat sich der FF verabschiedet und musste ich komplett aussteigen & wieder anwerfen. Daher schicke ich mal, wollte noch was schreiben, weiß nicht mehr - Faden verloren :)


    Liebe Grüße

    Christine


    Nachsatz: So, wieder geguckt & gesehen, dass sich obiges natürlich auf die restlichen (noch nicht verkleinerten Bilder) neg. auswirkt ......

    Die Ursache ist m.E. hier:


    @media screen and (max-width: 992px)

    article img, .article-intro img, article img[align=left], .article-intro img[align=left], article img[align=right], .article-intro img[align=right], article .img_caption, .article-intro .img_caption, article .article-image-full, .article-intro .article-image-full, article .article-image-intro, .article-intro .article-image-intro, article .img-intro-none, .article-intro .img-intro-none, article .img-intro-left, .article-intro .img-intro-left, article .img-intro-right, .article-intro .img-intro-right, article .img-fulltext-none, .article-intro .img-fulltext-none, article .img-fulltext-left, .article-intro .img-fulltext-left, article .img-fulltext-right, .article-intro .img-fulltext-right{

    float: none !important;

    margin-left: 0;

    margin-right: 0;

    width: 100% !important;

    }


    Mit dem Tipp von Christine habe ich es leider nicht hinbekommen, nur durch Entfernen von width und auch float für den Text.


    Christian

    Hallo zusammen,


    ich danke euch allen ! Der Tipp von Christine2 hat geklappt. Ich musste zwar alle Bilder überarbeiten / kleiner machen, aber das hattet ihr mir ja eh geraten pardon

    Eine Verschönerung würde ich gerne noch machen ... der Text neben den Passbildern rutscht nun relativ früh unter die Bilder. Kann ich das beeinflussen ? Evtl. auch über die Einstellungen im "Image Manager".


    VG Anja



    ach ja ... noch was ...

    Kann ich das mit dem Kompilieren irgendwo ausschalten / ändern ?

    VG Anja

    Sehr gut! Hab gerade nochmal meinen Text durchgelesen, ich habe komplett die Smileys vergessen ... aber hat ja funktioniert ... das mit dem Tapezieren sollte nur verdeutlichen wie groß die Bilder eigentlich sind. pardon


    Die Kompilierung kannst du nicht verhindern, aber es gibt Anleitungen wie du die CSS Dateien ändern kannst:

    https://www.joomlart.com/docum…/purity-iii/customization


    Aber immer dran denken bei großen/gravierenden Änderungen zumindest Dateien zu sichern ... ;)

    Für die einfache und schnelle Bearbeitung am heimischen Rechner ist irfanwiew gut. Da kann man auch automatisiert ausgewählte Bilder mit ausgewählten Einstellungen bearbeiten. Arbeite gerne damit. Gibt auch ein Plugin für weboptimierte Bilder zu erzeugen.

    Hallo AbRaXaS,

    alles gut :) hattest ja Recht.


    Ich hab die Bilder mit irfanview verkleinert.

    VG Anja