Quadratisch, Grid, nicht gut

[Gunnar Bittersmann]

Fällt mir nur keine Lösung ein oder gibt’s keine?

Zwei gleich große quadratische Kacheln nebeneinander: in der einen Text; in der anderen ein Bild, das unten abgeschnitten wird. ☞ Codepen: Problem

Wenn der Text länger wird (Details öffnen), vergrößert sich die Text-Kachel, fein. Dann sieht es aber blöd aus, dass die Bildkachel nicht gleichhoch ist, obwohl ja mehr vom Bild angezeigt werden könnte.

Per JavaScript ließen sich Höhe und Breite der Textkachel auslesen und das Seitenverhältnis der Bildkachel zuweisen. Dann sieht’s so aus wie es soll. ☞ Codepen: JavaScript

Aber kriegt man das auch ohne JavaScript hin?

🖖 Живіть довго і процвітайте

[Rolf B]

Hallo Gunnar,

kannst du die Mindesthöhe durch ein Dummy-Element in der gleichen Zelle festlegen? Das sollte mit padding-bottom:100% machbar sein.

Das Bild dann einfach drüber legen und so hoch machen wie die Zelle ist? Und mit object-fit:cover passend beschneiden?

Ist sicherlich nicht schick. Ich wüsste aber sonst nicht, wie Du die Mindesthöhe des picture-Elements auf seine Breite setzen kannst.

Rolf

[Gunnar Bittersmann]

@@Rolf B

kannst du die Mindesthöhe durch ein Dummy-Element in der gleichen Zelle festlegen? Das sollte mit padding-bottom:100% machbar sein.

Das Bild dann einfach drüber legen und so hoch machen wie die Zelle ist? Und mit object-fit:cover passend beschneiden?

Verstehe nicht so recht, wie du das meintest. Dank @ottogal muss ich das auch nicht. 😄

🖖 Живіть довго і процвітайте

[ottogal]

Bei mir (Firefox) geht es mit

picture {
	aspect-ratio: var(--aspect-ratio, 1);
	overflow: hidden;
	background: #051924;
	height: 100%;
	width: 100%;
}

[Rolf B]

Hallo ottogal,

super. Bei mir in Chrome auch. Explizite width/height Angabe überschreibt also aspect-ratio.

Rolf

[ottogal]

Das aspect-ratio muss jedoch bleiben - ganz gleich ob vor oder nach den width/height-Angaben.

[Gunnar Bittersmann]

@@ottogal

Bei mir (Firefox) geht es mit

picture {
	aspect-ratio: var(--aspect-ratio, 1);
	overflow: hidden;
	background: #051924;
	height: 100%;
	width: 100%;
}

Danke. ☞ Codepen: Lösung

🖖 Живіть довго і процвітайте