Responsives Templatedesign Skalierungsprobleme bei Bildern

  • Hallo liebe Community,


    Zurzeit arbeite ich an meinem ersten Joomla Template, da ich mich bisher nur mit statischen HTML Seiten beschäftigt muss es ja so kommen, dass gleich die ersten Probleme auftreten:rolleyes:.

    Also um euch einen kurzen Einblick zu verschaffen, auf meiner Startseite befindet sich eine Seitensektion in der Öffnungszeiten eingetragen werden können und daneben ist der main-content der Seite. Im main-content werden die neusten Artikel untereinander angezeigt. In einem dieser Artikel befindet sich ein Bild, hier liegt das Problem, beim kleiner skalieren der Seite z. B. für Smartphones wird mir das Bild nicht mit skaliert sondern einfach abgeschnitten.


    forum.joomla.de/core/attachment/2148/forum.joomla.de/core/attachment/2149/



    Ich hoffe ich konnte das Problem mit diesen Bildern verdeutlichen.;)


    Hier noch mein HTML und CSS Code (in rot hinterlegt die wichtigen Stellen)

  • Kann den Link auch nicht öffnen :(

    Arbeitest du mit Media Queries oder mit Bootstrap oder wie gehst du grundsätzlich an das responsive heran?

    Im Zweifelsfall bietet sich aber eine Media Querie an, die dann, wenn das Bild beschnitten wird, entsprechend eingreift und ein anderes Bild lädt.

    Alternativ dazu könnte ein "width:100%; beim Bild helfen. Oder eine entsprechende Klasse bei Bootstrap oder XAML oder CSSFoundation oder womit auch immer du arbeitest?


    Immer alle(!) Infos geben, die nützlich sein könnten!



    Axel

  • Hallo nochmal,


    habe vergessen zu erwähnen ich arbeite mit CSS3 Media Queries, ich hab auch schon versucht "width: 100%" auf das img Tag anzuwenden hat aber leider nicht funktioniert:(

    Ich werde die Bilder gleich nochmal hochladen wenn ich sie wieder gefunden habe.


    Hier die Media Querie

    Code
    1. @media(max-width: 480px)


    Hier die Width Angabe für das img Tag

    Code
    1. #content img{
    2. max-width: 100%;
    3. height: auto;
    4. }
  • Leider denke ich, dass das nicht des Rätsels Lösung ist, da wenn ich in den Entwickler tools im Browser öffne und das Bild auswähle (siehe Bild) angezeigt bekomme.

    Und falls die Frage noch aufkommt ich hab es in den drei Browsern Chrome, Firefox und Edge getestet mit dem selben Ergebnis.


    Gruß Alex

  • Jetzt denke ich hab ich das Problem selbst gefunden sodass ich nur noch einen Lösungsansatz von euch benötige.


    Das Problem ist, dass Joomla in seiner Beitragsstruktur automatisch die width auf 1508px setzt sobald ich diese Stilregel in den Entwicklerwerkzeugen deaktiviere funktioniert es.

    Somit stellt sich die Frage wie ich Joomla dazu bringe die Breite des Bildes nicht fest zu setzen.


    Gruß Alex

  • Das Problem ist, dass Joomla in seiner Beitragsstruktur automatisch die width auf 1508px setzt

    Nicht wirklich. Das wird alles von deinem Template und/oder von den eingesetzten Erweiterungen und/oder vom HTML-Code deiner Beiträge und Module gesteuert. Aber wenn ich mir den HTML-Code-Schnipsel deines Screenshots anschaue, dann bin ich ehrlich gesagt komplett verloren. Habe ich bei Joomla so noch nie gesehen. Vielleicht schaut ja aber jemand vorbei, der damit trotz allem etwas anfangen kann. Ich muss leider passen.

  • Kommentar des Ahnungslosen - in der FB-Gruppe stand ein Hinweis, dass der Egde mit "max-width" nicht zurecht kommt.


    Musste ich heute bei einer Kundenseite vor Ort auch feststellen.


    Der Tom hat dann irgendetwas gelöst - kann aber auch ein anderes Prolem gewesen sein.


    Deshalb mal einen anderen Browser testen

  • Mag ja sein, dass es irgendwie mit dem Edge zusammenhängt, aber ich kann dem Besucher ja nicht vorschreiben, welchen Browser er verwenden soll ;).


    Und was die diversen Lösungsansätze bzw. Problemlösungen bei der FB-Gruppe betrifft: Leider verschwinden sie dort nach kürzester Zeit im Nirvana und sind nicht (mehr) auffindbar :(

  • Ich habe keine Lösung, nur eine Beobachtung.

    Auf allen meinen Seiten verwende ich max-width: 100%; für Bilder innerhalb von Divs und habe nirgends Probleme, in keinem Browser. Ich verwende Boostrap entweder Version2 oder Version4.

    Auf dem Forum gab es ein Problem - konnte jeder nachvollziehen - und es war vorbei als Tom das max-width: 100% herausnahm.


    Ich meine dass da mehr dahinter steckt als nur max-width: 100%, es muessen mehrere Sachen zusammentreffen. So dass in dem Fall das Symptom kuriert wurde - aber die Ursache noch nciht ganz geklärt ist.

  • Ich hatte bisher auch noch nie Probleme damit, egal in welchem Browser oder ob bei Bootstrap oder UiKit. Deshalb denke ich ebenfalls, dass da mehr dahinter steckt als ein simples max-width: 100%. Aber wie gesagt, ohne einen Link zur Seite kommen wir da leider nicht weiter.

  • alexhafner00 Also der Code im Screenshot ist schon strange. Viele inline-styles und heftige Verschachtelungen. Beim dem width (Joomla bzw. ein Standradtemplate macht das nicht) könnte ich mir vorstellen, dass ein JS zwischenfunkt bzw. Dein Template.

    Also ohne Link wird das hier weiter eine lustige Frage und Rätselrunde bleiben.


    Gast es könnte sein (bin mir aber nicht sicher), dass der Edge erst einen Richtwert braucht um max-width für % zu berechnen. Das Problem (hier im Forum), habe ich mit einem einfachen width gelöst.

    Wenn ein max-with benötigt wird könnte man das so abfangen: width: auto; max-width: ...%;

  • Danke für eure ganzen Antworten am Ende hat sich herausgestellt, dass diese Verschachtelte Beitragsstruktur nur bei diesem einen Beitrag auftritt. Aufgrund dessen habe ich den Beitrag einmal gelöscht und von Grund auf neu geschrieben voila es funktioniert einwandfrei. Wahrscheinlich liegt es daran wie du Indigo66 schon gesagt hast.

    Also der Code im Screenshot ist schon strange. Viele inline-styles und heftige Verschachtelungen. Beim dem width (Joomla bzw. ein Standradtemplate macht das nicht) könnte ich mir vorstellen, dass ein JS zwischenfunkt bzw. Dein Template.

    Wahr natürlich ein Fehler von mir, dass ich nicht gleich mal den Beitrag neu geschrieben habe aber ich war fest davon überzeugt dass es an meinem Code liegt.

    Aber aus Fehlern lernt man und beim nächsten mal passiert mir das nicht mehr.


    Gruß an alle Alex