css: figure nimmt zuviel Platz ein

[MrMurphy1]

Hallo

Und was, wenn ich den "figcaption-Layer" etwas höher haben möchte, weils besser ausschaut?

Padding-top und padding-bottom verwenden.

Schönes Fazit, aber wie bekomme ich denn hin, was ich möchte?

Ich würde das folgende CSS verwenden (statt flexbox heißt bei mir die umgebende Klassse grafiken):

      * {
         min-width: 1px;
      }
      figure {
         min-width: 1px;
         max-width: 100%;
         min-height: 1px;
         margin: 0rem;
      }
      img {
         min-width: 1px;
         display: block;
         max-width: 100%;
         border: 0;
      }
      .grafiken {
         display: flex;
         flex-wrap: wrap;
         justify-content: center;
      }
      .grafiken figure {
         position: relative;
         margin: 0.5rem;
      }
      .grafiken img {
         width: 250px;
         border-radius: 15px;
      }
      .grafiken figcaption {
         background: rgba(0, 0, 0, 0.5);
         color: white;
         text-align: center;
         position: absolute;
         bottom: 0;
         width: 100%;
         padding: 0.3rem 0rem;
         border-bottom-right-radius: 15px;
         border-bottom-left-radius: 15px;
      }

Bei bplaced.net laufen wohl grade größere Umbauarbeiten, deshalb kann es sein dass meine Testseite nicht immer aufrufbar ist:

Testseite

Gruss

MrMurphy