Ich habe das verflixte Problem, dass bei einspaltiger Darstellung des main-content die im Beitrag führenden Bilder viel zu groß werden, besonders die Höhe. Ich könnte z.B. bei der Aufnahme der Fotos schon darauf achten, dass links und rechts genug übrig bleibt, um auch Seitenverhältnisse von bis zu 1 : 4,3 verwirklichen zu können. Das ist aber bei vielen Motiven nicht immer machbar!
Ich könnte aber auch den Beitrag bei kleiner Screenwidth einspaltig zeigen und ab einer nächsten Breite zweispaltig und ab der darauf folgenden Breite wieder einspaltig, aber dann mit einer Haupt- und einer Seitenspalte in 2/3 zu 1/3 geteilt. Und wenn's noch breiter wird, den Beitrag wieder zweispaltig darstellen.
Dabei würde das Bild bei zweispaltiger Darstellung des Beitrags nur in einer Spalte erscheinen.
Wenn diese Unterteilung mit @media gelingen würde, benötige ich wahrscheinlich nur zwei verschiedene Seitenverhältnisse des gleichen Bildes und würde dennoch die Ladezeit und den Datentransfer für den Besucher gering halten.
Beispiele (ACHTUNG: reine Experimentier-Website)
Wie kriege ich das nun in mehreren @media-Regeln untergebracht? Oder muss ich für jede Darstellungsgröße eine eigene Klasse für das Bild definieren, die dann bei Nicht-Erfüllung der Bedingung @media auf display: none gesetzt wird?
Kleine Ergänzungsfrage: Ich könnte ja mit object-fit: cover arbeiten. Aber dann müsste ich ein relativ großes Bild (Ladezeiten) laden, damit bei kleinen Screenwidth der gewünschte Effekt eines Bildausschnitt wirksam wird.
Hab schon mit folgendem experimentiert:
.cover-cl {
object-fit: cover;
max-width: 100%;
height: 230px;
}Sieht gut aus, wenn ein genügend großes Bild geladen wird UND wenn das Bild-Wichtige möglichst in der Bildmitte steht und nicht nach der Drittel-Regel weiter außen liegt.
Wähle ich die Bilder schon vorher mit der @media-Kondition so aus, dass nichts überflüssig Großes geladen wird, sieht's eher mickrig aus.