Beiträge von Sempervivum

Häufiges Problem und man kann gut rätseln, wie das zu Stande kommt. Die Erklärung ist, dass per Default die vertikale Ausrichtung von Elementen baseline ist. Das wird hier erklärt:

https://wiki.selfhtml.org/wiki…richtung#Unterl.C3.A4ngen

mit dem deutschen Begriff "Grundlinie" für Baseline.

Für Text so weit plausibel aber dass das auch auf Bilder einschl. Canvas angewendet wird - na ja.

Macht man die Elemente farbig und fügt einige Buchstaben hinzu, erkennt man, dass auch das Canvas unten an der Grundlinie ausgerichtet ist:

baseline-issue.jpg

Beheben kannst Du es leicht, indem Du für das Canvas vertical-align: top; setzt. Eine Alternative ist display: flex; für das div weil dann die vertikale Ausrichtung durch align-items bestimmt wird.

Zitat

Ich habe eine weitere onload Funktion angehängt:

window.onload = function () {

Hier ist wahrscheinlich das Problem, dass Du mit dieser Anweisung die Funktion, die Du zuvor angehängt hast, überschreibst.

Lösung: Alles in einer einzigen Funktion erledigen. Oder beide Funktionen mit addEventListener registrieren, hier ist das "add" wortwörtlich zu verstehen, die Funktion wird hinzu gefügt und überschreibt die vorige nicht.

Dieses funktioniert bei mir ganz gut, Punkte außen lassen und das ganze mit margin-left herein ziehen:

Du musst die Option selber klonen, nicht das Select:

Das liegt daran, dass das Element bei dem zweiten appendChild nicht kopiert wird sondern verschoben. Du musst eine Kopie erzeugen bzw. es klonen und dann die Kopie im anderen Select hinzu fügen.

https://developer.mozilla.org/de/docs/Web/API/Node/cloneNode

Da gibt es recht viele Möglichkeiten, wie man so etwas realisieren kann. Ein Beispiel:

Die Bilder nebeneinander in einem Container anordnen und durch overflow: hidden; dafür sorgen, dass immer nur das erste sichtbar ist.

Eine Funktion zyklisch aufrufen, entweder durch setInterval oder requestAnimationFrame.

In dieser Funktion das letzte Bild nehmen und an den Anfang stellen.

Zitat

Ich hab Breite minus Höhe gerechnet

Das erklärt natürlich alles, in dem Fall musst Du natürlich mit 0 vergleichen. Selber dividiere ich immer Breite durch Höhe.

Zitat

Die entstehenden bildgrössen sind aber immer unterschiedlich, wegen der verschiedenen Geräte

Das ist dann wohl unvermeidlich, jedenfalls wenn man nicht will, dass das Bild verzerrt oder beschnitten wird.

Funktioniert das object-fit denn jetzt bei dir?

Bei object-fit ist ein möglicher Fallstrick: Es funktioniert nur, wenn man dem Bild Höhe und Breite gegeben hat, damit der Browser weiß, wie er es einpassen muss.

Für das Problem gibt es eine relativ einfache Lösung, ohne dass man selber das CSS für Höhe und Breite aus dem Seitenverhältnis berechnen muss:

https://developer.mozilla.org/de/docs/Web/CSS/object-fit

https://www.html-seminar.de/cs…t-fit-object-position.htm

Bei deinem Javascript schreibst Du leider nicht, wie Du das Seitenverhältnis aspectvalue berechnest. Normaler Weise muss man aber auf größer oder kleiner 1 abfragen.

... Du bist nicht der erste, der dieses Problem hat, siehe hier:

https://stackoverflow.com/ques…ive-margin-and-background

Die Empfehlung, position: relative; der Textbox zuzuweisen, funktioniert, aber frag mich nicht wieso und warum es ohne das nicht funktioniert.

BTW: Für dieses Layout würde sich die Verwendung des figure-Tags anbieten statt Divs.

OK, jetzt verstehe ich, was das Problem ist. Ich sehe es mir an ...

PS: So wie hier?

https://jsfiddle.net/Sempervivum/gv5wbsyf/3/

Ich nehme mal an, Du möchtest, dass der Text das Bild überdeckt und mittig positioniert ist?

Leider hast Du nur das HTML gepostet und nicht das CSS.

Ist ja ein Ding!

Ja, es gibt das noscript-Tag, damit kann man eine Meldung anzeigen wenn JS nicht aktiviert ist:

https://developer.mozilla.org/…Web/HTML/Element/noscript

D. h. jetzt funktioniert alles? Ich habe noch eine Kleinigkeit bemerkt: Manche Bilder sind horizontal etwas versetzt.

Geht auch der Menübutton wieder?

Ich sehe überhaupt keinen Screenshot.

Bei mir waren die Bilder bei schmalem Browserfenster auch zunächst verzerrt, aber das verschwand dann als ich die Seite mit Strg+F5 neu geladen habe.

Auf meinem Handy sind die Bilder OK.

Ich nehme an, Du meinst den Hamburger-Button? Was funktioniert denn nicht, geht das Menü nicht mehr auf?