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.
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.
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/css-object-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/questions/2696…-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 ...
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/de/docs/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?
Das JS setzt ja nur das flex auf das Seitenverhältnis. Wenn Du auf column umschaltest, nehmen die Bilder die gesamte Breite ein. Du kannst das durch ein max-width verhindern.
Genau, für das letztere mit einer Mediaquery auf column umschalten.
Und einen Zwischenraum bekommst Du mit margin-left und margin-right.
So ist es einwandfrei responsiv und passt sich an die Breite an ohne dass man einen Listener für das resize braucht:
<!doctype html>
<html>
<head>
<title></title>
<style>
.flex-row {
display: flex;
}
.flex-row img {
min-width: 1px;
}
</style>
</head>
<body>
<section id="dacharbeiten-referenz">
<h2>Dacharbeiten und Neubau</h2>
<div class="flex-row">
<img class="flex-img" src="images/bild1.jpg" alt="Sanierung und Neubau">
<img class="flex-img" src="images/burgtor_01.jpg" alt="Sanierung und Neubau">
</div>
</section>
<script>
document.querySelectorAll('.flex-img').forEach(theImg => {
theImg.addEventListener('load', event => {
const ratio = theImg.naturalWidth / theImg.naturalHeight;
console.log(ratio);
theImg.style.flex = ratio;
})
});
</script>
</body>
</html>Warte mal ich mache etwas ...