Hallo Herbert,
ich bin mir nicht ganz sicher, wie Du das mit den Bildern in Deiner Skizze meinst:
max 100% aber auch kleiner, wenn nötig
Wie sollen die Bilder zueinander ausgerichtet sein, wenn sie weniger als 100% breit sind?
In jedem Fall ist die Basis:
👉 DEMO
<div id="grid-container">
<img src="" alt="">
<img src="" alt="">
</div>
[id="grid-container"] {
display: grid;
grid-template-columns: 1fr 4fr 4fr 1fr;
grid-template-rows: 1.5fr 7fr 1.5fr;
grid-template-areas: ". . . ."
". a b ."
". . . .";
}
[id="grid-container"] > :nth-child(1) {
grid-area: a;
}
[id="grid-container"] > :nth-child(2) {
grid-area: b;
}
[id="grid-container"] {
height: 60vh;
width: 60vw;
}
[id="grid-container"] > img {
object-fit: contain;
height: 100%;
width: 100%;
}