img mit css auf eine einheitliche Größe, Breite bringen, inkl eventuell abschneiden

[Sascha]

Hallo,

ich versuche gerade meine Bilder mittels CSS zu einem ordentlichen Erscheinungsbild zu bekommen.

Ist es möglich mehrere Bilder (unterschiedliche Größen) img nur mit css zu formatieren um sie einheitlich aussehen zu lassen. Zum Beispiel 16 zu 9, und den Rest nicht anzeigt.

Sascha

[Jonathan Harker]

Hallo Sascha,

Ist es möglich mehrere Bilder (unterschiedliche Größen) img nur mit css zu formatieren um sie einheitlich aussehen zu lassen.

Ja!

img {
  width: 150px;
  aspect-ratio: 16 / 9;
}

Zum Beispiel 16 zu 9, und den Rest nicht anzeigt.

Das ist die Eigenschaft: CSS/Eigenschaften/aspect-ratio

Evtl. vorher CSS/Tutorials/Einstieg lesen!

Und mit CSS/Eigenschaften/object-fit feiner einstellen.

Bis bald! Jonathan

[Matthias Scharwies]

Servus!

img {
  width: 150px;
  aspect-ratio: 16 / 9;
}

Das ist die Eigenschaft: CSS/Eigenschaften/aspect-ratio

Grad auf Twitter gesehen: CSS aspect-ratio is now supported cross-browser! It lets you set the proportion of an element's dimensions without padding-top hacks Smiling face with heart-shaped eyes Read more in http://web.dev/aspect-ratio http://mdn.io/aspect-ratio

Herzliche Grüße

Matthias Scharwies

[Robert B.]

Moin Matthias,

CSS aspect-ratio is now supported cross-browser! It lets you set the proportion of an element's dimensions without padding-top hacks Smiling face with heart-shaped eyes Read more in http://web.dev/aspect-ratio http://mdn.io/aspect-ratio

(Hervorhebung von mir 😉)

Viele Grüße
Robert

[Sascha]

Ich habe zwei Lösungen:

img{ object-fit: cover; width:auto; height:200px; }

img{ object-fit: cover; width:200px; height:200px; }

ich hätte aber gerne noch Lösung 3

wo ich die Breite bei 25% hätte und die höhe sich automatisch anpassen würde.

Sascha

[Jonathan Harker]

Hallo Sascha,

ich hätte aber gerne noch Lösung 3

wo ich die Breite bei 25% hätte und die höhe sich automatisch anpassen würde.

img {
  width: 25%;
  aspect-ratio: 16 / 9;
}

Lass die Höhenangabe weg, die überschreibt sonst aspect-ratio.

Bis bald! Jonathan