nicht angemeldet
Mein Lösungsversuch beinhaltet nicht alle, aber ich denke doch die wesentlichen, deiner Anforderungen. Es geht mir auch darum überhaupt erst mal ein funktionierendes Beispiel zu erstellen.
Bilder mittels CSS zu vergrößern führt häufig zu Problemen. Ich halte mich deshalb an die bewährte Regel, Bilder so groß zur Verfügung zu stellen, wie sie maximal angezeigt werden sollen.
Die Bildbeschreibung außerhalb der Grafik führt auch zu Problemen. Zumal wenn die Höhe nicht festgelegt ist, weil die Beschreibung umbrechen kann (was ich auch für sinnvoll halte). Deshalb habe ich das figcaption-Element mit einer durchsichtigen Hintergrundfarbe auf dem Bild plaziert.
Zur Übersichtlichkeit habe ich das CSS in drei Abschnitte unterteilt, die natürlich auch zusammengefasst werden können. So lässt sich aber leichter Testen.
Um die Bildbeschreibung unten zu plazieren habe ich die entsprechenden CSS-Anweisungen als Kommentar eingefügt. Gleiches für eine zweite Farbkombination.
Über- und unterhalb des Bildes habe ich einen Rand gelassen, weil mir das optisch besser gefällt.
Bei mir passt sich der Inhalt flexibel auf die Fensterhöhe und -breite an. Auch die Bildbeschreibung. Einfach mal ausprobieren. Bei schmaler Fensterbreite wird auch das hinterste Bild sichtbar.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Bildergröße</title>
<meta name="description" content="Platzhalter - Ein kurze Beschreibung des Inhalts in Satzform">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/*Basisangaben*/
* {
box-sizing: border-box;
min-width: 1px;
}
html {
}
body {
margin: 0rem 0rem 0rem 0rem;
}
}
/*Grafiken*/
@media all {
figure {
min-width: 1px;
max-width: 100%;
min-height: 1px;
margin: 0rem;
}
img {
min-width: 1px;
display: block;
max-width: 100%;
border: 0px;
}
}
/*.gallery*/
@media all {
.gallery {
}
.gallery div {
height: 100vh;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: center;
}
.gallery figure {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: center;
}
.gallery img {
max-height: 100vh;
padding: 1rem;
}
.gallery figcaption {
}
}
/*.gallery css-grid, um die div-Elemente zu stapeln*/
@media all {
.gallery {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
}
.gallery div {
grid-column-start: 1;
grid-row-start: 1;
}
.gallery figure {
}
.gallery img {
}
.gallery figcaption {
}
}
/*.gallery figcaption*/
@media all {
.gallery {
}
.gallery div {
}
.gallery figure {
position: relative;
}
.gallery img {
}
.gallery figcaption {
background-color: hsla(0, 0%, 100%, 0.5);
/*background-color: hsla(0, 100%, 50%, 0.4);*/
color: black;
/*color: white;*/
position: absolute;
top: 0;
/*bottom: 0;*/
width: calc(100% - 2rem);
padding: 0.5rem 1rem;
margin-top: 1rem;
/*margin-bottom: 1rem;*/
}
}
</style>
</head>
<body>
<main id="content" class="content">
<section class="gallery">
<div>
<figure>
<figcaption>Ein Glas Kölsch</figcaption>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f0/Glas_malz_muehlenkoelsch.jpg/401px-Glas_malz_muehlenkoelsch.jpg" alt="Glas mit Kölsch">
</figure>
</div>
<div>
<figure>
<figcaption>Deutzer Brücke mit Hauptbahnhof und Dom</figcaption>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/be/Stadtbild_K%C3%B6ln_%2850MP%29.jpg/1024px-Stadtbild_K%C3%B6ln_%2850MP%29.jpg" alt="Stadtpanorama">
</figure>
</div>
<div>
<figure>
<figcaption>Einmol im Johr kütt d'r Rhing us em Bett und noch viel mehr Text um einen Zeilenumbruch zu provozieren, damit er kontrolliert werden kann.</figcaption>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8e/Bundesarchiv_B_422_Bild-0086%2C_K%C3%B6ln%2C_Rheinufer%2C_Hochwasser.jpg/573px-Bundesarchiv_B_422_Bild-0086%2C_K%C3%B6ln%2C_Rheinufer%2C_Hochwasser.jpg">
</figure>
</div>
</section>
</main>
</body>
</html>
Rolf B
Gunnar Bittersmann
Henry