Bilder im gleichen Format

Vielleicht hilft dir der alte padding-top Trick?

https://css-tricks.com/aspect-ratio-boxes

Chrome hat auch die neue CSS Property aspect-ratio:

https://developer.mozilla.org/…docs/Web/CSS/aspect-ratio

Mir ist nicht ganz klar was du erreichen willst.

Bilder können per CSS nicht in andere Seitenverhältnisse gebracht werden. Dann werden sie zwangsweise verzerrt.

Sie können in Containern (üblicherweise dem figure-Element) angezeigt werden, der dann das gewünschte Seitenverhältnis hat.

Dann muss entschieden werden, ob die Bilder, die ein anderes Seitenverhältnis haben, mit Rändern angezeigt werden sollen oder ob Teile des Bildes abgeschnitten werden sollen.

Das lässt sich mit CSS bewerkstelligen. Dazu sind auch keine großartigen Berechnungen notwendig.

Wenn die Bilder nacheinander oder in einem Pop-Up-Fenster angezeigt werden wird wohl auch JavaScript erforderlich sein. Das macht es wieder schwieriger.

Arbeitest du immer noch mit Bootstrap? Und geht es immer noch um die Thematik aus deinem ersten Beitrag?

Bootstrap Divs unterschiedlich breit

Es wäre hilfreich das zu wissen.

Noch ein Hinweis: HTML und CSS sind keine Bildbearbeitungsprogramme. Zu den Grundlagen und zum bewährten Vorgehen gehört, Bilder für Webseiten zunächst in einem Grafikprogramm vorzubereiten. Dazu gehört sie so zu verkleinern, wie sie maximal auf der Webseite angezeigt werden sollen. Und sie alle in das gewünschte Seitenverhältnis zu bringen, falls das für das Layout erforderlich ist.

Zitat von MrMurphy

Bilder können per CSS nicht in andere Seitenverhältnisse gebracht werden. Dann werden sie zwangsweise verzerrt.

Das stimmt nicht. Mit Hilfe von aspect-ratio und object-fit kann man auch Bilder selber in das gewünschte Verhältnis bringen.

Allerdings; der Trick mit dem padding-top klappt nur mit Container.

Zitat von MrMurphy

Noch ein Hinweis: HTML und CSS sind keine Bildbearbeitungsprogramme [...]

Das Stimmt. In einer idealen Welt wäre das der richtige Weg. Jedoch manchmal kann man die Bilder nicht bearbeiten, da sie zum Beispiel über eine API abgerufen werden.

Danke für die Info. Das

Zitat

aspect-ratio und object-fit

kannte ich noch nicht. Hast du mal ein praktisches Beispiel?

Zitat

Jedoch manchmal

Das man nur Bilder bearbeiten kann, die auf dem eigenen Rechner vorliegen ist klar. Das ist aber die Regel, wie du offensichtlich auch erkannt hast. Wer gute Webseiten erstellen will muss halt Zeit investieren.

Zitat von MrMurphy

kannte ich noch nicht. Hast du mal ein praktisches Beispiel?

Schau dir mal diesen Blogeintrag an: https://web.dev/aspect-ratio/ Da gibt es auch einige Beispiele.

Du hast den Blogeintrag offensichtlich überhaupt nicht durchgelesen oder verstanden. Dort wird nirgends beschrieben wie direkt das Seitenverhältnis von Bildern mit aspect-ratio geändert werden kann. Das geht sachlich einfach nicht.

Entweder werden die Bildern in Containern angezeigt, die ein bestimmtes Seitenverhältnis haben. Oder, direkt auf Bilder angewendet, wird vermieden, dass deren Seitenverhältnis geändert werden kann.

Ich habe inzwischen nach den Verwendung von aspect-ratio gegoogelt und dort auch genau das bestätigt gefunden.

Mein Angaben sind richtig. Es wäre nett wenn du dich selbst zunächst informieren würdest, bevor du die als falsch darstellst. Oder zeige ein konkretes Beispiel.

Schau' dir mal diesen Abschnitt und das dazugehörige Codepen Beispiel an.
da wird mit

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

direkt das Seitenverhältnis des <img> geändert ohne dass das Bild dabei verzerrt wird.

Zitat

Direkt das Seitenverhältnis des <img> geändert ohne dass das Bild dabei verzerrt wird.

Du weißt offensichtlich überhaupt nicht was du schreibst. In dem Beispiel wird mit aspect-ratio direkt auf das Bild angewandt verhindert, dass es seine Seitenverhältnisse ändert. Also genau das, was ich geschrieben habe. Du hast jedoch behauptet

Zitat

Das stimmt nicht. Mit Hilfe von aspect-ratio und object-fit kann man auch Bilder selber in das gewünschte Verhältnis bringen.

Mit aspect-ratio können verschiedene Bilder also grade nicht selbst in ein gewünschtes (einheitliches) Seitenverhältnis gebracht werden ohne zu verzerren, wie Simuletsplay es wünscht. Er hat offensichtlich Bilder mit unterschiedlichen Seitenverhältnissen, die er ohne zu verzerren alle in dem gleichen Seitenverhältnis anzeigen will. Das geht nur wie von mir geschrieben.

Ok, dann habe ich wohl die Frage falsch verstanden. Ich dachte Simuletsplay wollte das so:

<style>
   img {
      width: 200px;
      aspect-ratio: 16 / 9;
      object-fit: cover;
   }
</style>

<img src="https://source.unsplash.com/random/800x600">
<img src="https://source.unsplash.com/random/600x800">
<img src="https://source.unsplash.com/random/100x100">
<img src="https://source.unsplash.com/random/50x60">

Dafür kann man aspect-ratio verwenden.

Ich hab' mal ein Online-Beispiel erzeugt, dass die Bilder zunächst in Originalgröße / -verhältnis zeigt und dann mit deinen Angaben.

https://www.w3schools.com/

Der Mittelsteg kann zur Änderung der Fensterbreite verschoben werden.

Ich sehe die gleiche Breite der Bilder, nicht jedoch die gleiche Höhe. Das Seitenverhältnis ist also unterschiedlich.

Lösch mal einfach zum Spaß die Angaben aspect-ratio und object-fit in dem Online-Beispiel und kontrolliere, was sich ändert (indem du erneut auf "Run" klickst) - nämlich nichts. Die beiden CSS-Angaben haben in dem Zusammenhang überhaupt keine Auswirkungen. Nur die width-Angabe.

MrMurphy Schönes Beispiel.

Wenn ich auf Run drücke, sieht das Ergebnis bei mir so aus (Ich habe nur den "Bilder mit aspect-ratio und object-fit" Ausschnitt genommen):

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

Wenn ich die Properties lösche so:

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

Kleine Frage: Mit welchem Browser schaust du dir das Beispiel an?

Ich hatte nämlich in #2 geschrieben:

Zitat von AndreasB

Chrome hat auch die neue CSS Property aspect-ratio:

Das war nicht nur so daher gesagt und die Kompatibilitätstabelle zeigt das auch:
html-seminar.de/woltlab/attachment/2913/

Zitat

Ja die können ruhig abgeschnitten werden.

Dafür hast Du ja mit object-fit: cover; schon eine Lösung gefunden.

Ich nehme an, das verbleibende Problem ist dann dieses:

Zitat

Problem an der ganzen Sache ist, dass auch relativ kleine Bilder dabei sind.

Bei meinem Versuch wurden diese dann auf die Weite gestreckt.

Das heißt, Du willst nicht, dass kleine Bilder herauf skaliert werden?

Ich habe da mal ein Javascript gemacht, das das Heraufskalieren unterbindet:

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Test</title>

    <style>
        #img1 {
            object-fit: cover;
        }

        #img2 {
            object-fit: contain;
        }

        #img3 {
            object-fit: contain;
            width: 80vw;
            height: 45vw
        }

        img.my-object-fit {
            width: 900px;
            height: 450px;
        }
    </style>
</head>

<body>
    <img id="img1" class="my-object-fit" src="images/dia0.jpg">
    <img id="img2" class="my-object-fit" src="images/dia0.jpg">
    <img id="img3" class="my-object-fit" src="images/busleft.png">
    <script>
        document.querySelectorAll('img.my-object-fit').forEach(img => {
            // Wir muessen warten, bis das Bild geladen wurde,
            // damit die natuerlichen Abmessungen bekannt sind:
            img.onload = (event) => {
                const compStyle = getComputedStyle(event.target),
                    objectFit = compStyle.objectFit,
                    // Die Abmessungen des Bildes, die im CSS fest gelegt wurden:
                    csshImg = parseInt(compStyle.height),
                    csswImg = parseInt(compStyle.width),
                    // Die natuerlichen Abmessungen des Bildes:
                    nhImg = img.naturalHeight,
                    nwImg = img.naturalWidth;
                if (
                    // Wuerde das Bild bei "contain" herauf skaliert?
                    (objectFit == 'contain' && (nhImg < csshImg && nwImg < csswImg))
                    ||
                    // Wuerde das Bild bei "cover" herauf skaliert?
                    (objectFit == 'cover' && (nhImg < csshImg || nwImg < csswImg))
                ) {
                    // Herauf skalieren unterbinden:
                    img.style.objectFit = 'none';
                    img.style.height = 'auto';
                    img.style.width = 'auto';
                }
            }
        });
    </script>
</body>


</html>

Damit es funktioniert, musst Du den Bildern, auf die es wirken soll, die Klasse my-object-fit geben und das Skript an das Ende des body stellen, vor das schließende </body>. Versuche, ob es das tut, was Du erwartest. Komplizierte Berechnungen sind es nicht, im Kern jeweils nur drei Abfragen für cover und contain.