wieder mal: responsive Bilder

[Zille]

Moin,
ich komm’ nich klar …
Während auf der Startseite (http://eliasfriedhof.de/) das Bild responsive angezeigt wird, geschiet das in den anderen Artikeln (z.B: http://eliasfriedhof.de/grabmal-benad.html) nicht. Weshalb?

Die Einstellungen zu Themes » Bildgrößen habe ich mir angeschaut, ebenso die Anleitung – begreife aber nicht, was dort unter Sizes-Attribut eingetragen werden muss. Probieren hilft nüscht, weil es keine Änderungen in der Anzeige gibt.

Gibt es eventuell eine weitere erklärende Seite? Vielleicht mit Beispielen, damit man das besser nachvollziehen kann?
Danke.

[Kahmoon]

https://rocksolidthemes.com/de/conta...picture-contao

Edit: das war ja schon verlink. Sorry

[tab]

Moin,
ich komm’ nich klar …
Während auf der Startseite (http://eliasfriedhof.de/) das Bild responsive angezeigt wird, geschiet das in den anderen Artikeln (z.B: http://eliasfriedhof.de/grabmal-benad.html) nicht. Weshalb?

Es passiert auf allen Seiten, überall passen sich die Bilder der Größe ihres Containers an. Das passiert durch das folgende CSS.

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

Natürlich passiert da erst was, wenn der Container kleiner wird als das Bild, was beim Verkleinern des Browserfensters auf der Startseite früher eintritt als auf den anderen Seiten.

[Zille]

Es passiert auf allen Seiten, überall passen sich die Bilder der Größe ihres Containers an. Das passiert durch das folgende CSS.

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

Na ja – sagen wir, es sollte überall passieren. Tatsächlich geschieht es aber eben nicht.

Natürlich passiert da erst was, wenn der Container kleiner wird als das Bild, was beim Verkleinern des Browserfensters auf der Startseite früher eintritt als auf den anderen Seiten.

Während das Bild der Startseite kontinuierlich kleiner wird, sobald das Broserfenster kleiner als 768px wird, passiert das auf den anderen Seiten noch nicht mal, wenn die auf 50px Breite zusammengeschoben werden. Da bleiben die Bilder immer gleich groß (naja, gleich hoch – die Breite kann kann ja logischerweise nicht mehr kontrolliert werden)

[tab]

In welchem Browser kannst du die auf 50px zusammenschieben? Geht bei mir in Firefox nicht, da ist bei 287px Schluss. Und da sagt die Grafikinfo zum Bild:
342px × 450px (Skaliert zu 255px × 336px)
Na also, wird doch skaliert! Breite und Höhe. Natürlich wird das Bild nicht von Anfang an proportional zur Fensterbreite runterskaliert. Es ist gefloatet, wenn das Browserfenster schmäler wird, dann wird erst mal der Text schmäler. Erst, wenn kein Text mehr neben dem Bild ist und es nach Abzug der Paddings und Margins nicht mehr ins Fenster passt, fängt es an skaliert zu werden. Das Bild auf der Startseite ist wesentlich breiter, deswegen passt es eben früher nicht mehr ins Fenster und wird schon früher runterskaliert.

[Zille]

In welchem Browser kannst du die auf 50px zusammenschieben? Geht bei mir in Firefox nicht, da ist bei 287px Schluss.

In Firefox! (Umschalt+Strg+M) Unbenannt.JPG. Auch im Google-Resizer (http://design.google.com/resizer/#) wird es falsch dargestellt.

Hm, welchen Fehler mache ich? Renn’ ich einem Problem hinterher, das es gar nicht gibt?

[tab]

Naja, bei 50px bleibt nach Abzug des (Wrapper-)Padding und Margin des Image-Containers nicht mehr viel Breite übrig. Vom Text, insbesondere den Überschriften, allerdings noch weniger. Bei realistischen Smartphone-Breiten so ab 320 CSS-Pixel aufwärts werden die Bilder meines Erachtens korrekt skaliert und sind komplett sichtbar ohne horizontales Scrollen. Auf dem Android-Handy sieht die Seite bei mir auch ganz manierlich aus. Das margin-left, das wohl für den Abstand des Texts vom gefloateten Bild gebraucht wurde, würde ich wie auch das float:right; mit einem Media-Query noch rausnehmen bzw erst bei breiterem Viewport reinnehmen. Wenn das Fenster mal schmaler ist als die Datei-Auflösung des Bilds, passt da eh kein Text mehr neben das Bild bzw dummerweise gerade noch das "D." von "D. Zille". Das sieht dann eben komisch aus wenn das "D." links vom Bild steht und unter dem Bild dann "Zille, ...". Aber ansonsten: So sieht der Google-Bot die Seite.

[Spooky]

Moin,
ich komm’ nich klar …
Während auf der Startseite (http://eliasfriedhof.de/) das Bild responsive angezeigt wird, geschiet das in den anderen Artikeln (z.B: http://eliasfriedhof.de/grabmal-benad.html) nicht. Weshalb?

Tut es doch. So sieht das Bild am iPhone 4S aus bspw. (CSS Pixel Größe):

Runterskaliert auf 288px Breite (von 342px).

[Zille]

Na ja, aber müsste das Bild selbst nicht auch kleiner werden?!? Falls wir hier aneinander vorbeireden, ich mein Problem nicht verständlich formuliert habe – ich glaube, das auf einer respondiven Seite nicht nur der Text umgeschichtet wird.

Auf der Startseite wird das Bild so klein wird, das man letztlich nur noch den weißen Rahmen dessen erkennen kann, das eigentliche Bild darin praktisch verschwunden ist – so stelle ich mir die Bilder auch auf den anderen Seiten vor.

Dort wird der Text verschoben und macht Platz für das Bild, das Bild selber aber wird nicht kleiner. Selbst wenn für die Seit insgesamt nur noch 50px in der Breite zur Verfügung stehen, ist das Bild immer noch in der selben Höhe zu sehen.

[tab]

Auf der Startseite gibt es eben keinen Text, den man erst umschichten könnte, da geht es gleich an die Bildgröße. Deswegen wird es da wohl immer annähernd proportional zur Fensterbreite sein. Das andere Bild ist zunächst mal von vornherein kleiner (von den Bilddaten her). Es wird erst kleiner, wenn es nicht mehr anders geht. Wenn es immer proportional zur Fensterbreite sein soll, musst du dem Image Container entsprechend einen prozentualen Wert geben, per Default ist halt ein Blockelement immer so breit wie es das umgebende Element hergibt.

[Zille]

Ah ha.
Der Unterschied entsteht dadurch, das ich auf der Startseite ein Element vom Typ "Bild", auf den anderen aber ein Element vom Typ "Text" (dem dann eine Bild zugeordnet wurde) eingesetzt habe. "Text" (inclusive Bild) ist in dem Fall ein Blockelement, "Bild" (als einzelnes Element) hingegen nicht?

[Spooky]

Na ja, aber müsste das Bild selbst nicht auch kleiner werden?!?

Ist es ja, das haben wir ja doch schon mehrmals gesagt.

Falls wir hier aneinander vorbeireden, ich mein Problem nicht verständlich formuliert habe – ich glaube, das auf einer respondiven Seite nicht nur der Text umgeschichtet wird.

Erkläre nochmal genauer was du nun haben möchtest.

[Zille]

Ist es ja, das haben wir ja doch schon mehrmals gesagt.

Auch wenn schon mehrfach eine solche Erklärung versucht wurde – gelungen ist sie nicht. Bitte schaue Dir das im Beitrag #6 angehängte Unbenannt.JPG an – dort ist an der Höhe des Bildes nachzuvollziehen, dass das Bild – obwohl die Breite des Bildschirms auf 50px zusammen geschoben wurde – nicht verkleinert wird.

Es sei dahingestellt, dass die derzeitige Gebenheit vollkommen praxistauglich ist, an und für sich nichts geändert werden müsste. Ich möchte nur gern verstehen, weshalb unterschiedliche Ergebnisse an den Bilder entstehen.

[Spooky]

Auch wenn schon mehrfach eine solche Erklärung versucht wurde – gelungen ist sie nicht. Bitte schaue Dir das im Beitrag #6 angehängte Unbenannt.JPG an – dort ist an der Höhe des Bildes nachzuvollziehen, dass das Bild – obwohl die Breite des Bildschirms auf 50px zusammen geschoben wurde – nicht verkleinert wird.

Es wird aber verkleinert, wie schon mehrmals erwähnt. Das Bild ist, bei einer Viewport Breite von 50px, dann 88px breit. Die Mindestbreite aus 88px resultiert aus der Mindestbreite der <figcaption> - und diese resultiert wiederum aus deren Textinhalt.

[tab]

Das hängt zum Teil mit diversen Margins und Paddings zusammen, die du z.B. dem Wrapper, dem Bild und anderen Elementen gegeben hast. Beim Bild auf der Startseite. Wenn ich da den Viewport auf Breite 50 einstelle, dann hat z.B. das figure-Element (in dem das Bild enthalten ist) ein linkes und rechtes Margin von jeweils 48px. Die Breite des Elements ist 0. Dementsprechend ebenfalls die Breite des Bilds -> Man sieht es nicht mehr. Auf der anderen Seite hat das figure-Element im anderen Bild eine Breite von(?): 88px(!). Dementsprechend kann hier noch was dargestellt werden, auch das Bild ist so breit. Passt aber eigentlich gar nicht in das ce_text rein. Aber das ce_text hat die Klasse block und damit overflow:hidden; sprich das figure wird von der Breite her einfach nur teilweise dargestellt, soweit es eben in das ce_text passt.

Lange Rede, kurzer Sinn: Du solltest dich nicht fragen, warum sich die Bilder (scheinbar) unterschiedlich verhalten, sondern warum das figure-Element jeweils unterschiedlich groß ist.

[Zille]

Das Bild ist, bei einer Viewport Breite von 50px, dann 88px breit.

Das eben kann ich – visuell – nicht nachvollziehen. Woher hast Du diesen Wert der Breite von 88px? Das hieße ja, das Bild würde auf 25,7% der Breite schrumpfen – aber weshalb wirkt sich das nicht gleichzeitig auf die Höhe aus, bzw. weshalb ist eine Änderung der Höhe nicht zu sehen?
Wie und wo kann man die derzeitige tatsächliche Breite ablesen?

Du solltest dich nicht fragen, warum sich die Bilder (scheinbar) unterschiedlich verhalten, sondern warum das figure-Element jeweils unterschiedlich groß ist.

Ja, das tue ich gerade. Und da fällt mir auf, dass der Text im figure der Startseite umbricht, in der anderen Seite hingegen nicht. Das zweite stützt

Die Mindestbreite aus 88px resultiert aus der Mindestbreite der <figcaption> - und diese resultiert wiederum aus deren Textinhalt.

lässt mich aber ratlos zurück.

[Spooky]

Das eben kann ich – visuell – nicht nachvollziehen. Woher hast Du diesen Wert der Breite von 88px?

Rechtsklick - Element inspizieren oder Rechtsklick - Bildinfos anzeigen.

Das hieße ja, das Bild würde auf 25,7% der Breite schrumpfen – aber weshalb wirkt sich das nicht gleichzeitig auf die Höhe aus, bzw. weshalb ist eine Änderung der Höhe nicht zu sehen?

Die Änderung der Höhe ist zu sehen.

[Zille]

Rechtsklick - Element inspizieren/Bildinfos anzeigen gibt es nicht in Firefox, wohl aber »Grafik-Info anzeigen«. Das sieht dann so aus:

[tab]

Die Breiten, Höhen, Margins, Paddings usw kannst du alle mit den Entwickler-Tools deines Browsers anschauen. Auch die sonstigen Eigenschaften, die durch dein CSS gesetzt werden. Die Breite und Höhe deines Bilds kannst du auch einfach (in Firefox) mit einem Rechtsklick auf das Bild und "Grafikinfo anzeigen" herausbekommen. Da wird mir, wenn ich mittels Umschalt-Strg M das Fenster auf 50 Pixel breite verkleinere, folgendes angezeigt:
Maße: 342px × 450px (Skaliert zu 88px × 116px). Die Höhe von 116px sieht man auch, aber von der Breite sieht man eben nur sehr wenig. Die volle Höhe sieht man, weil sich das figure-Element einfach entsprechend der Höhe des Inhalts anpasst. In der Breite tut es das auch, passt aber nicht ins zu schmale Browser-Fenster bzw ins noch schmalere div.ce_text, welches wiederum die Eigenschaft overflow:hidden; hat. Dadurch wird die überschüssige Breite, der "Overflow", eben abgeschnitten. Die Mindestbreite der figcaption resultiert, wie Spooky schon geschrieben hat, aus ihrem Inhalt (Text). Da ist wohl irgendein Wort drin, das so breit ist und nicht umgebrochen werden kann. Das mag z.B. das Wort "Eliasfriedhof" sein oder auch (optisch breiter aussehend) "SLUB/Deutsche". Schau dir das Ganze einfach mal in Ruhe mit den Entwicklerwerkzeugen an und beschäftige dich mit CSS.

[Zille]

Da ist wohl irgendein Wort drin, das so breit ist und nicht umgebrochen werden kann. Das mag z.B. das Wort "Eliasfriedhof" sein oder auch (optisch breiter aussehend) "SLUB/Deutsche".

Aha, der Text bricht auf Grund der Länge der Worte nicht um. Ist ja eigentlich klar, Bäume vor Wald nicht gesehen. Gleich mal in <figure> den Text geändert: Elias fried hof vor 1909, Quelle: SLUB Deut sche Foto thek.

Nun sollte der Text umbrechen … macht er aber nicht.

Die Höhe von 116px sieht man auch, aber von der Breite sieht man eben nur sehr wenig. Die volle Höhe sieht man, weil sich das figure-Element einfach entsprechend der Höhe des Inhalts anpasst.

Ebenso wird das Bild keineswegs kleiner, wie in das im obigen Beitrag angehängte Bild sehr wohl zeigt. Auch das »Skaliert zu 88px × 116px« kann ich nirgends entdecken. Würde nur die Breite skaliert werden und die Höhe entsprechend des figure-Element gleich bleiben, ja dann wäre der Inhalt des Bildes verzerrt. Auch das ist nicht der Fall.

Wieso seht Ihr etwas, was bei mir nicht angezeigt wird? Ihr habt Euch die angehängten Bilder angeschaut? Ich möchte Euch ja gern folgen, nur stellt es eben »mein« Firefox nicht dar. Ich drehe mich im Kreis …

[tab]

Welche Version von Firefox nutzt du denn? Ich habe Firefox 49.0.2, da gibt es definitiv den Menüpunkt "Element untersuchen". Das gibt es aber auch schon sehr lange, zumindest mehrere Jahre. Ansonsten weiss ich auch nicht warum das bei dir so aussieht und warum du das bei dir nicht findest. Eventuell ist da das Browser-Styleshet auch noch anders als beim aktuellen Firefox.

Edit: Bei mir ist das Bild jetzt nach deinen Änderungen auf 41x54px skaliert, ist also nochmal kleiner geworden.

[Zille]

folgendes bekomme ich auf Abfrage zu sehen:

Firefox ESR
45.4.0
Fierefox ist aktuell
Sie sind derzeit auf dem Update-Kanal esr.

[Spooky]

Das ist eine mittlerweile sehr alte FireFox Version.

[tab]

Naja, es ist die aktuelle ESR-Version. Ich habe keine Ahnung, ob sich diese Versionen von "normalen" in manchen Details unterscheiden. Das "Element untersuchen" gab es doch jedenfalls schon lange Firefox 45, der ist ja wohl noch von diesem Jahr. ESR ist für Firefox wohl so was ähnliches wie LTS bei Contao .

[Zille]

Nö, es ist die neuste Version.

Das Firefox "Extended Support Release" (kurz: ESR) ist vor allem für Unternehmen gedacht, die den Browser nur in größeren Abständen updaten möchten. Während sich die herkömmliche Firefox-Version alle sechs Wochen erhöht, erscheint die ESR-Variante nur einmal im Jahr - wird aber dennoch mit aktuellen Sicherheitsupdates versorgt.

Habe mir mal den Chrom installiert, und siehe … es geht wie gewünscht. Also ist mein Browser an der tagelangen Suche schuld. Werde den trotzdem weiter benutzen, aber hoffentlich demnächst daran denken, meine Seiten auch in anderen Browsern anschauen. Danke an die Helfer.