Hallo
Ich sehe eher das folgende HTML
Code
<article class="thumbnails">
<figure>
<a href=""><img src="http://lorempixel.com/400/200/abstract/1"></a>
<figcaption>
<p>Abstrakt (2016)</p>
<p>zu Hause in Hamburg-Oldenfelde</p>
</figcaption>
</figure>
<figure>
<a href=""><img src="http://lorempixel.com/400/200/transport/2"></a>
<figcaption>
<p>WOA (2015)</p>
<p>zu Hause in Bremen</p>
</figcaption>
</figure>
<figure>
<a href=""><img src="http://lorempixel.com/400/200/cats/8"></a>
<figcaption>
<p>Grinning Cat (2013)</p>
<p>zu Hause in Hamburg-Wandsbek</p>
</figcaption>
</figure>
<figure>
<a href=""><img src="http://lorempixel.com/400/200/fashion/7"></a>
<figcaption>
<p>Mystic Owl (2013)</p>
<p>zu Hause in Großensee bei Trittau</p>
</figcaption>
</figure>
<figure>
<a href=""><img src="http://lorempixel.com/400/200/transport/5"></a>
<figcaption>
<p>Thomys Island (2013)</p>
<p>zu Hause in Travemünde</p>
</figcaption>
</figure>
</article>mit dem folgenden CSS
Code
header, nav, main, aside, footer, figure, article, figure, figcaption, audio, video {
display: block;
}
* {
box-sizing: border-box;
}
html {
font-family: sans-serif;
font-size: 100%;
line-height: 1.3;
}
body {
width: 96%;
margin: 1rem auto;
}
.thumbnails {
display: flex;
flex-wrap: wrap;
}
.thumbnails figure {
min-width: 0;
max-width: 100%;
border: 1px solid gray;
margin: 0.5rem 1%;
flex-grow: 0;
flex-shrink: 1;
flex-basis: 23%;
-ms-flex-preferred-size: calc(23% - 2px);
}
.thumbnails figcaption {
padding: 0.5rem;
}
.thumbnails figcaption p {
font-size: 0.8rem;
text-align: center;
margin: 0.3rem 0;
}
.thumbnails img {
display: block;
max-width: 100%;
max-height: 100vh;
border: 0;
margin: 0 auto;
}Eine komplette Seite könnte dann folgendermaßen aussehen
HTML
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Thumbnails mit Text 01</title>
<meta name="description" content="HTML5, CSS3">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if lt IE 9]>
<script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script>
<![endif]-->
<style>
@media all {
header, nav, main, aside, footer, figure, article, figure, figcaption, audio, video {
display: block;
}
* {
box-sizing: border-box;
}
html {
font-family: sans-serif;
font-size: 100%;
line-height: 1.3;
}
body {
width: 96%;
margin: 1rem auto;
}
.thumbnails {
display: flex;
flex-wrap: wrap;
}
.thumbnails figure {
min-width: 0;
max-width: 100%;
border: 1px solid gray;
margin: 0.5rem 1%;
flex-grow: 0;
flex-shrink: 1;
flex-basis: 23%;
-ms-flex-preferred-size: calc(23% - 2px);
}
.thumbnails figcaption {
padding: 0.5rem;
}
.thumbnails figcaption p {
font-size: 0.8rem;
text-align: center;
margin: 0.3rem 0;
}
.thumbnails img {
display: block;
max-width: 100%;
max-height: 100vh;
border: 0;
margin: 0 auto;
}
}
</style>
</head>
<body>
<header role="banner">
</header>
<nav role="navigation">
</nav>
<main role="main">
<article class="thumbnails">
<figure>
<a href=""><img src="http://lorempixel.com/400/200/abstract/1"></a>
<figcaption>
<p>Abstrakt (2016)</p>
<p>zu Hause in Hamburg-Oldenfelde</p>
</figcaption>
</figure>
<figure>
<a href=""><img src="http://lorempixel.com/400/200/transport/2"></a>
<figcaption>
<p>WOA (2015)</p>
<p>zu Hause in Bremen</p>
</figcaption>
</figure>
<figure>
<a href=""><img src="http://lorempixel.com/400/200/cats/8"></a>
<figcaption>
<p>Grinning Cat (2013)</p>
<p>zu Hause in Hamburg-Wandsbek</p>
</figcaption>
</figure>
<figure>
<a href=""><img src="http://lorempixel.com/400/200/fashion/7"></a>
<figcaption>
<p>Mystic Owl (2013)</p>
<p>zu Hause in Großensee bei Trittau</p>
</figcaption>
</figure>
<figure>
<a href=""><img src="http://lorempixel.com/400/200/transport/5"></a>
<figcaption>
<p>Thomys Island (2013)</p>
<p>zu Hause in Travemünde</p>
</figcaption>
</figure>
</article>
</main>
<footer role="contentinfo">
</footer>
</body>
</html>Nachtrag: Ich habe einige Tippfehler korrigieren müssen.
Gruss
MrMurphy