Beiträge von Sempervivum

Bei breitem Browserfenster sieht das schon sehr gut aus aber wenn man es schmal zieht, werden die Bilder verzerrt. Mit Javascript kannst Du ja beliebig rechnen und die Höhe z. B. abhängig von der Fensterbreite machen. Was ich jedoch empfehlen würde ist, die Strategie des TO hier:

https://stackoverflow.com/questions/6095…wn-aspect-ratio

zu nehmen und das flex auf Grund des Seitenverhältnisses mit Javascript zu berechnen. Dann kannst Du die Bilder schön responsiv mit Flexlayout anordnen, so dass sie sich automatisch an der Breite des Browserfensters orientieren.

Ich hatte auch mal eine reine CSS-Lösung für diese Aufgabe, kann die Lösung aber dummer Weise nicht wiederfinden

Lege die beiden Bilder zusammen in einen Container und wende auf diesen das CSS mit Flex an:

.inner-row {
    display: flex;
    justify-content: space-around;
}

                <article class="referenz-bilder">
                    <div class="container">
                        <div class="row">
                            <div class="col-6">
                                <h2 id=dacharbeiten-referenz>Dacharbeiten und Neubau</h2>
                                <div class="inner-row">
                                    <img src="./src/img/dacharbeiten_1.webp" id="bild1" alt="Sanierung und Neubau">
                                    <img src="./src/img/dacharbeiten_2.webp" id="bild2" alt="Sanierung und Neubau">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-6">
                                <h2 id=flachdachabdichtungen-referenz>Flachdachabdichtungen</h2>
                                <div class="inner-row">
                                    <img src="./src/img/flachdachabdichtungen_1.webp" id="bild3" alt="Flachdachabdichtungen_1">
                                    <img src="./src/img/flachdachabdichtungen_2.webp" id="bild4" alt="Flachdachabdichtungen_2">
                                </div>
                            </div>
                        </div>
<!-- usw. -->

Damit das justify-content wirksam wird, braucht es jedoch freien Raum zwischen den Elementen. Und wo dieser liegt, kann man am besten mit dem HTML-Inspektor sehen. Wenn Du das online hast, dann poste die URL.

Dazu brauchst Du das Event 'resize' für das Element window.

https://wiki.selfhtml.org/wiki/JavaScrip…ddEventListener

Zitat

das rechte bild, also das zweite sollte dann weiter nach rechts, damit es ordentlich aussieht.

Das kannst Du dann mit Flexlayout, für den Container display: flex; und justify-content: je nachdem, wie Du den freien Raum verteilen möchtest.

https://css-tricks.com/snippets/css/a…xbox-properties

Zitat

Kann ich das CSS mit dem JS überschreiben? Ich hatte voreingestellt im css, dass height auf auto steht, dann greift der js code nicht mehr...

CSS, das Du mit Javascript setzt, hat immer die höchste Priorität. Setze statt des Attributes height die Höhe unter style:

document.getElementById("bild2").style.height = bild2_height + 'px';

Wichtiger als das Format scheint mir die Übergabe vom Spiel an Javascript zu sein. Hat man es erst Mal in Javascript ist es kein Problem, es mit Ajax an den Server zu schicken und in einer Website anzuzeigen.

Ich finde da dieses:

https://docs.unity3d.com/Manual/webgl-i…rscripting.html

und dieses:

https://www.patrykgalach.com/2020/05/04/com…webgl-and-page/

Bist Du damit schon vertraut?

Als Format würde ich, soweit verfügbar, JSON empfehlen, weil es sehr leicht auszuwerten ist.

OK, verstehe. Ich habe da mal etwas mit Flexlayout aufgebaut, wo die Bilder annähernd die selbe Größe haben:

        <article class="referenz-bilder">
            <!-- Wir weisen den img-Tags jeweils eine Klasse zu,
            die angibt ob es sich um Quer- oder Hochformat handelt -->
            <section id="dacharbeiten-referenz">
                <h2>Dacharbeiten und Neubau</h2>
                <div class="flex-row">
                    <img class="landscape" src="images/bild1.jpg" alt="Sanierung und Neubau">
                    <img class="portrait" src="images/burgtor_01.jpg" alt="Sanierung und Neubau">
                </div>
            </section>
            <section id="flachdachabdichtungen-referenz">
                <h2>Flachdachabdichtungen</h2>
                <div class="flex-row">
                    <img class="portrait" src="images/burgtor_02.jpg" alt="Sanierung und Neubau">
                    <img class="landscape" src="images/bild2.jpg" alt="Sanierung und Neubau">
                </div>
            </section>
            <section id="dachklempnerei-referenz">
                <h2>Dachklempnerei</h2>
                <div class="flex-row">
                    <img class="portrait" src="images/burgtor_02.jpg" alt="Sanierung und Neubau">
                    <img class="portrait" src="images/burgtor_01.jpg" alt="Sanierung und Neubau">
                </div>
            </section>
        </article>

        .flex-row {
            display: flex;
            justify-content: space-around;
            align-items: flex-start;
        }

        .flex-row img {
            min-width: 0;
            border: 2px solid lightgray;
        }

        /* Bildern im Hochformat weisen wir eine etwas geringere Breite zu
        als denen im Hochformat, dann haben die Bilder annähernd die selbe Groesse */
        .flex-row img.portrait {
            width: 35%;
        }

        .flex-row img.landscape {
            width: 45%;
        }

Prüfe, ob es in etwa deinen Vorstellungen entspricht.

Man kann es auch mit Gridlayout machen, dann wären die Bilder in Form eines Rasters angeordnet und die Anordnung würde sich nicht von Zeile zu Zeile unterscheiden.

Man kann die Bilder mit Javascript auch exakt auf die selbe Größe bringen, dann könnte man auf die Zuweisung von Klassen für Hoch- und Querformat verzichten.

Mit Swiper dagegen kein Problem:

https://jsfiddle.net/Sempervivum/97usv5jy/4/

Statt der Texte "prev" und "next" kannst Du natürlich Bilder verwenden und statt des blauen Hintergrundes ebenfalls ein Bild.

Ich habe sie zunächst nach außen gelegt, war soweit kein Problem:

https://codepen.io/Sempervivum/pen/dyWYNvb

(Ich habe die Änderungen mit Pfeilen --> markiert und kommentiert).

So weit so gut. Nur wird jetzt links und rechts der benachbarte Container sichtbar und wenn ich das beheben will, werde ich mit den Nachteilen einer nur-CSS-Lösung konfrontiert: Ich müsste die prev-/next-Buttons aus dem Container heraus nehmen aber das geht nicht ohne weiteres, weil die Anordnung durch die Funktion eingeschränkt ist.

Das sind a-href-Tags, die er mit CSS zu Kreisen gemacht hat. Ab Zeile 147 im Codepen.

OK, dann würde ich auch zu etwas vorgefertigtem raten. Bei Codepen gibt es sicher jede Menge Slider nur mit CSS, z. B dieser:

https://codepen.io/rokobuljan/pen/XXzqKQ

Json? Meinst Du ohne Javascript? Schon, bei nur 3 Spielen recht einfach aber Du schreibst "vermutlich" und dann muss man daran denken, dass es erweiterbar sein müsste. Und das ist bei nur-CSS recht umständlich.

So hatte ich es eigentlich auch verstanden. Aber alles machbar mit Swiper: automat.jpg müsste dann der Hintergrund für den Swiper-Container sein. Und die Bilder für die Spiele würden weiter geschaltet. HTML ist nötig, um ein a-Tag um die Bilder herum zu legen.

Ach so, verstehe. In dem Fall würde ich etwas vorgefertigtes nehmen, z. B. Swiper:

https://swiperjs.com/demos

Was mich irritiert ist, dass Du schreibst "in Form eines png" und dass ich in dem Bild ein "Spiel1.jpg" sehe. Weder png noch jpg ist interaktiv? Bei WebGL denke ich eher an Canvas?

PS: Du schriebst:

Zitat

Der einzelne Themenbereich wiederum hat jeweils zwei Bilder nebeneinander unter sich.

Unter "Dachklempnerei" finde ich jedoch 7 Bilder. Möchtest Du diese jetzt in zwei Spalten anordnen, so dass jeweils zwei nebeneinander stehen?

PS: Bei dem Verfahren mit absoluter Positionierung wird man mit einem Nachteil konfrontiert: Die Größe des Elternelementes passt sich nicht mehr an die Größe Kindelementes an. Das kann man vermeiden, wenn man beide Elemente mit Gridlayout übereinander legt:

        li {
            display: grid;
        }

        li .english,
        li .japanese {
            grid-area: 1 / 1;
            transition: opacity 1s;
        }

        li .english {
            opacity: 1;
        }

        li .japanese {
            opacity: 0;
        }

        li:hover .english {
            opacity: 0;
        }

        li:hover .japanese {
            opacity: 1;
        }

Die Frage ist, was Du erreichen möchtest. Wenn Bilder im Hochformat die Breite voll ausfüllen, werden sie wiederum in der Höhe unverhältnismäßig groß. Mein Vorschlag: Die Bilder immer gleich groß machen und akzeptieren, dass dann bei denen im Hochformat seitlich Platz bleibt.

Ist das Seitenverhältnis denn bei allen Bildern gleich?

Ein weiches Überblenden kannst Du mit diesem CSS erreichen:

        li {
            position: relative;
        }

        li .english {
            opacity: 1;
            transition: opacity 1s;
        }

        li .japanese {
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            transition: opacity 1s;
        }

        li:hover .japanese {
            opacity: 1;
        }

        li:hover .english {
            opacity: 0;
        }

html-seminar.de/woltlab/attachment/3131/

Vorbereitung eines Link-Placement mit der Hoffnung, dass es übersehen wird, wenn man den Link ein paar Stunden/Tage später hinein editiert?