portseven: Bilder in gleicher größe + Höhe

Hallo Leute,

ich wollte mal Fragen wie man die Bilder in gleicher Größe + Länge anzeigen kann, ohne das die Bilder verpixelt werden. Wenn ich z.b ein 200x200 Bild in 600x600 anzeige, kennt man es ja das es sehr schlecht aussieht bzw die Qualität sehr schlecht ist.

Hier mal ein Bild was ich genau meine:

EDIT: Screenshot gelöscht, aufgrund einer möglichen Urheberrechtsverletzung.
Der Screenshot zeigte eine 2x3 Matrix quadratischer Bilder.
/EDIT

Wenn ich width:100% und height: auto mache dann ist alles wunderbar. Jedoch ist dann mal ein Bild größer als das andere und das sieht gar nicht schick aus.

  1. Servus!

    ich wollte mal Fragen wie man die Bilder in gleicher Größe + Länge anzeigen kann, ohne das die Bilder verpixelt werden. Wenn ich z.b ein 200x200 Bild in 600x600 anzeige, kennt man es ja das es sehr schlecht aussieht bzw die Qualität sehr schlecht ist.

    Deshalb solltest Du Bilder, die wichtige Inhalte transportieren, in guter Qualität und großer Größe verwenden. Dabei sollte aber trotzdem auf geringe Dateigrößen, bzw. hohe Komprimierung geachtet werden.

    Wenn ich width:100% und height: auto mache dann ist alles wunderbar. Jedoch ist dann mal ein Bild größer als das andere und das sieht gar nicht schick aus.

    Ich passe Bilder immer mit einer Bildbearbeitung an, sodass alle Bilder das gleiche Format haben.

    Wenn Du Bildern in unterschiedlichen Formaten (Porträt, Landschaft, quadratisch hast, könntest du sie automatisch in ein grid platzieren (- alle modernen Browser unterstützen dies.)

    Herzliche Grüße

    Matthias Scharwies

    --
    Es gibt viel zu tun: ToDo-Liste
    1. @@Matthias Scharwies

      Wobei die Betonung auf „bei denen die genaue Reihenfolge unwichtig ist“ liegt.

      Wenn interaktive Elemente (Links) in den Griditems sind, dann ist die genaue Reihenfolge wichtig. Dann sollte man das nicht tun, sonst wird die Seite mit der Tastatur unbenutzbar.

      LLAP 🖖

      --
      „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
  2. @@portseven

    Hier mal ein Bild was ich genau meine:

    Ein Bild sagt weniger als ein paar Worte. Was ist dein Problem?

    Die Bilder im Grid anzuordnen? Jen Simmons erklärt’s im Video Incredibly Easy Layouts with CSS Grid; ich hab da ein Beispiel.

    Nicht große Bilddateien laden, wenn die Bilder nur in klein angezeigt werden? Responsive images.

    Oder haben deine Bilder nicht dasselbe Seitenverhältnis? Dann ist vielleicht Zurück zu den Wurzeln was für dich.

    Geht auch beides? Klar. Ich muss das mal aufschreiben. Mathematische Funktionen ohne Sass. Da isser wieder, der Knoten im Taschentuch.

    LLAP 🖖

    --
    „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
    1. Du Schuft... hast mir dies immer vorenthalten, obwohl dies, mich auf neue Ideen für Wege eines meiner Probleme bringt! grrrrrrrr

      P.p.s.: Kann man der Online-Umwandung von Scss etwa hier: https://sass2css.herokuapp.com oder hier: http://www.cssportal.com/scss-to-css/ vertrauen oder sollte ich besser Ruby und Compass auf meinem PC installieren?

      1. @@einsiedler

        Du Schuft... hast mir dies immer vorenthalten

        Hab ich. Äh, was eigentlich?

        P.p.s.: Kann man der Online-Umwandung von Scss etwa hier: https://sass2css.herokuapp.com oder hier: http://www.cssportal.com/scss-to-css/ vertrauen

        Keine Ahnung.

        oder sollte ich besser Ruby und Compass auf meinem PC installieren?

        Ich schätze mich seit etlichen Jahren in der glücklichen Lage, Ruby von Haus aus auf dem Rechner zu haben, ohne mich mit der Installation rumplagen zu müssen.

        Wozu brauchst du Compass?

        LLAP 🖖

        --
        „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann