Responsives Templatedesign Skalierungsprobleme bei Bildern

alexhafner00 · 22. April 2018

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.

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)

Spoiler anzeigen

Code

<body>
          <header>
              <div class="container">
                  <div class="headerlogo">            
                      <jdoc:include type="modules" name="logo-nav"/>
                  </div>

                  <nav>
                    <jdoc:include type="modules" name="top-nav"/>
                  </nav>
              </div>
          </header>
            
          <div class="container">
            <aside>
                <jdoc:include type="modules" name="aside" style="XHTML" />
            </aside>
            <section id="content">
              <jdoc:include type="message" />
              <jdoc:include type="component" />
              <jdoc:include type="modules" name="main-content" style="XHTML" />
            </section>
          </div>

Alles anzeigen

Code

.active{
    font-weight: bold;
}

.page-header {
    text-align: center;
}

#content img{
    max-width: 100%;
    height: auto;
}

body{
    font-family: sans-serif;
    font-size:  17px;
    padding: 0px;
    margin:0px;
    background-color: white;
}



header{
    background-color:lightgrey;
    color:red;
    padding-top:30px;
    min-height: 70px;
    border-top:red solid 3px;
}

header  nav{
    float:right;
    padding-top: 10px;
}

header a{
    text-decoration: none;
    color: red;
    text-transform: uppercase;
}

header ul{
    margin: 0;
    padding: 0;
}

header li{
    display: inline;
    padding: 0 20px 0 20px;
}

.headerlogo{
    float:left;
    font-size: 28px;
    font-weight: bold;
}

section{
    width: 80%;
    float:left;
}

section p {
    padding-right: 5%;
    padding-left: 5%;
}


aside{
    width:20%;
    float: left;
}


footer{
    background-color: lightgrey;
    color: red;
    border-bottom: 3px red solid;
    padding: 20px 0 20px 0;
}

footer a{
    float: left;
    margin: 0;
    text-decoration: none;
    color: red;
}

footer li{
    display: inline;
}

footer ul{
    margin: 0;
    padding: 0;
}

footer .contact{
    float: right;
    margin: 0;
    padding: 0;
}

footer p{
    float: none;
    padding-top: 60px;
}


.container{
    width: 90%;
    margin:auto; 
    overflow:hidden;
}

@media(max-width: 480px){
    header nav,
    .headerlogo a,
    header li,
    footer a,
    footer .contact,
    footer p{
        float: none;
        text-align: center;
        width: 100%;
        display: flex;
        justify-content: center;
        padding:0;
        margin:0;
    }

    header{
        padding-bottom: 20px;
    }

    .container{
        width:85%;
        float: none;
        margin: auto;
    }

    section{
        float:none;
        width: 100%;
    }

    .page-header {
        text-align: center;
    }
 
    aside{
        float:none;
        width:100%;
    }

    footer a{
        display: flex;
        text-align: center;
        justify-content: center;
        padding-bottom: 10px;
    }

    footer p{
        padding-top: 20px;
    }

}

Alles anzeigen

Da diese Methode, zur Skalierung der Bilder, bei statischen HTML Seiten immer funktioniert hat bin ich ratlos

Deshalb würde ich mich sehr über eure Lösungsvorschläge freuen.

Schöne Grüße

Alex

Re:Later · 22. April 2018

Die Bilder kann ich nicht öffnen.

time4mambo · 22. April 2018

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

alexhafner00 · 24. April 2018

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

@media(max-width: 480px)

Hier die Width Angabe für das img Tag

Code

#content img{

    max-width: 100%;

    height: auto;

}

SilOrs67 · 24. April 2018

Hallo,

nicht max-width.. probier mal nur width:100%

alexhafner00 · 24. April 2018

Hallo wird ich schnell mal ausprobieren,

kann bloß sagen, dass es so bei static Html Seiten immer funktioniert hat.

Aber danke

anka · 24. April 2018

max-width: 100% müsste auch bei einer dynamischen Webseite funktionieren. Aber ohne einen Link zum Problem können wir höchstens "blindes Huhn" spielen

alexhafner00 · 24. April 2018

Die Bilder nochmal beim klein skalierten Fenster oder auch auf dem Smartphone wird das Bild rechts abgeschnitten.

Auch wenn ich "max-width" auf "width" ändere

alexhafner00 · 24. April 2018

Würde euch den Link zur Website gerne geben aber die läuft leider noch auf einem Testserver bei mir im lokalen Netzwerk

christine2 · 24. April 2018

Na ja OK - dann mal Körnchen streuen fürs Huhn:

statt so:

Code

#content img{
    max-width: 100%;
    height: auto;
}

so probieren:

Code

img {
    max-width: 100%;
    height: auto;
}

Liebe Grüße
Christine

alexhafner00 · 24. April 2018

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

alexhafner00 · 24. April 2018

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

anka · 24. April 2018

Zitat von alexhafner00

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.

Gast · 24. April 2018

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

anka · 24. April 2018

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

firstlady · 24. April 2018

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.

anka · 25. April 2018

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.

Indigo66 · 25. April 2018

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.

@Oberaffe 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: ...%;

alexhafner00 · 25. April 2018

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.

Zitat von Indigo66

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