Mein Ergebnis: Bildler-Boxen gestalten

[ursus contionabundo]

Jetzt muss ich mal schauen wie ich automatisch Bilder beschneiden kann, wenn diese hochkant sind. Da kann ich wohl mit CSS nichts machen?

Mit etwas wie

img.autoscale {
  max-width: 100%;
  height: auto;
  max-height: 100%;
  width: auto;
}

kannst Du womöglich skalieren. (Ich habe nicht getestet, ob das mit beiden Dimensionen auf einmal geht!) Du fragst aber nach "Beschneiden".

Eigentlich ist für das Beschneiden clip zuständig.

.clipRect {
  position: absolute;
  overflow: hidden;
  clip: rect(100px, 135px, 125px, 90px);
}

Dann hab ich noch einen Tipp gefunden:

"Will man einfach nur einen Bildausschnitt darstellen, ohne dass das Bild gestaucht wird, kann man die CSS-Eigenschaften object- verwenden."*

.cropCenter {
  height: 300px;
  width: 100% !important;
  object-fit: cover;
  object-position: top center;
}