Bilder im gleichen Format

  • Hallo zusammen,


    ich habe bei mir das Problem in der Diashow, dass nicht alle Bilder im 16:9 Format sind.


    Von daher brauche ich eine Möglichkeit, dass ich alle Bilder mithilfe von CSS in dieses Format bekomme.


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


    Bei meinem Versuch wurden diese dann auf die Weite gestreckt.


    CSS
    img {
        width: 1920px;
        height: 1080px;
        object-fit: cover;
    }


    Also bisher kenne ich da keine Möglichkeit als irgendwelche komplizierten Rechnungen...


    Wer kann mir helfen?


    Grüße

    Ben

  • 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.

  • 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.



    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.

  • 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.

  • 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:

    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:

    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/

  • 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.

    Ja die können ruhig abgeschnitten werden.

    Verzerrt am besten nicht...

  • 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?

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

    Ja genau!

    Sonst werden die warum auch immer in die Weite gezogen, so dass die Höhe auf die (bisher) Pixel-Angabe, die ich vorgeben musste, damit es funktioniert.

    Immerhin hat es dort mit den Bildern funktioniert, die größer waren.


    Also Beispiel: Die Angabe war 1920x1080 px. Dann wurden die kleinen Bilder (1634x613) auf eine Höhe skaliert, dass diese 1080 beträgt - passend dazu auch die Weite, aber es wurde natürlich auch viel weg geschnitten. In diesem Fall müsste die Weite des Bildes "abgeschnitten" werden. So, dass das Bild 1090x613 px groß ist. Dann ist es im 16:9 Format!

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

    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.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!