Css Grid - ausrichten von ungleichen Bildern

[D0bby]

Moin

ich bin gerade am üben (1 Woche) und versuche mich an einem Grid Layout welches responsiv werden soll.
Nun hab ich mir einfach random Bilder rein gepackt die alle ein anderes Format haben ; 16:9 , 1:1, usw.

Aktuell scheint mein Layout die einzelnen Artikel im ganzen auf der Diagonalen auszurichten - das sieht aber nicht gerade sehr schön aus.
Wie könnte oder würdet ihr vorgehen, das die einzelnen Artikel gut aussehen (von der Position her)

https://jsfiddle.net/s48rdv2n/1/

 

[netzgestaltung]

Was würde denn deiner Meinung nach schön aussehen? Ev kannst du ein einfaches Vorlageschema mit einem Grafik-Programm ausführen.

Ich hab mich mit der Zeit darauf geeinigt, dass mein System einen Bildschnitt hat, und somit aus unterschiedlichen Bildgrößen immer ein passendes Bild generiert wird, die ich dann fix (mit CSS-Flex) benutzen kann in einem Layout.

 

[TSB]

objekt-fit: "contain" oder "cover"; -> "contain" bringt immer das volle bild auf die auflösung, "cover" füllt den latz mit dem Bild aus, auch wenn das bild dann abgeschnitten wird


aspect-ratio: 1/1 oder 16/9; -> Form format, 16:9, 1:1, musst du rum probieren

edit: align-items: center oder justify-content: center sollten die in eine gerade Linie bringen

 

[D0bby]

align-items: center oder justify-content: center im .main bringen Text und Bild zusammen in eine Mitte.

Da die Größe durch die Bilder aber unterschiedlich ist ist die Mitte auch woanders. Dadurch ist der Text in der Mitte weiter unten

 

[TSB]

So würd ich das jetzt machen, sieht Ordentlicher aus, wenn du "Cards" verwenden möchtest, kannst du dir mal bootstrap angucken, da ist einiges vorgefertigt und ich finde es auch entspannt zu lernen.

@D0bby

/*....... */ .p-text{ text-align: justify; } /*....... */ article{ width: 87%; } /*....... */ .picture { width: 300px; height: auto; object-fit: "cover"; aspect-ratio: 1 / 1; } /*....... */

 

[D0bby]

gefällt mir schon mal die Lösung.

Staucht aber die breiteren Bilder - aber einen Tot muss man scheinbar sterben / stauchen oder abschneiden

Ich danke euch

 

[netzgestaltung]

Als drittes könntest du die zu breiten bilder kleiner darstellen und einen Hintergrund basteln. Das schaut auch bescheiden aus, ist aber noch eine 3. Wahl ;-)

 

[TSB]

Tja das ist leider die Qual beim Frontend Programmieren, entweder man hat unpassende Bilder(Formfaktor/Auflösung) oder muss sich zwischen "cover" und "contain" entscheiden, wobei beide Optionen nicht zufriedenstellend sind

 

[D0bby]

Das schaut auch bescheiden aus, ist aber noch eine 3. Wahl ;-)

xD

 

[M4ttX]

Bei Bildern als Artikelvorschau in einem Grid ist Cover mit fixer Aspect ratio meist die beste Wahl um jegliche Bildformate verzerrungsfrei und flächenfüllend anzuzeigen.