[pillola] Tabella responsive di immagini con descrizione

**KillerWorm** · 03-01-2018, 16:31

Discussione inserita tra le pillole dei link utili CSS

Al giorno d'oggi il fattore responsive è una delle caratteristiche di serie per il layout delle moderne applicazioni web. Spesso però si ha necessità di recuperare vecchi progetti in modo da renderli ancora fruibili riadattandoli secondo questo attuale standard. In alcuni casi si ha a che fare col problema delle tabelle che difficilmente si prestano a questo tipo di restyle, se non ricorrendo a espedienti solitamente limitativi o macchinosi.

Dopo aver letto diverse discussioni (questa in particolare) in cui viene esposto tale problema (o problemi simili), ho provato ad elaborare una possibile soluzione con l'uso di flexbox e qualche altro accorgimento. Certamente sul web si possono trovare varie soluzioni più o meno adatte per i vari casi.

In questo specifico caso non si ha necessità di mantenere una reale struttura tabellare (cioè con una qualche relazione tra righe e colonne) ma, più semplicemente, si tratta di ottenere una "griglia" (contenente delle immagini con una propria descrizione) per la quale deve variare il numero di elementi per riga in maniera responsive.

Qui un esempio Pen.

Qui il codice completo:

codice:

<!DOCTYPE HTML>
<html>

  <head>
    <title>Responsive Images Grid</title>
    <meta charset="utf-8">
    <style type="text/css">
      body {
        margin: 0;
        background: Black;
      }

      .picsponsive {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
        max-width: 900px;
        margin: 0 auto;
        text-align: center;
      }

      .picsponsive>figure {
        position: relative;
        width: 100%;
        margin: 0 0 3px;
        padding: 1px 1px 3.4rem;
        box-sizing: border-box;
        border: 2px solid Black;
        background: DimGrey;
        overflow: hidden;
      }

      .picsponsive>figure>img {
        max-width: 100%;
        max-height: 550px;
        vertical-align: middle;
      }

      .picsponsive>figure>figcaption {
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        left: 1px;
        right: 1px;
        bottom: 1px;
        min-height: 3.4rem;
        padding: .2rem;
        box-sizing: border-box;
        font: 1rem/1.2 Arial, Helvetica, sans-serif;
        color: Snow;
        background: Grey;
      }

      /* Vertical align image "ghost element" hack */

      .picsponsive>figure:before {
        content: '';
        display: inline-block;
        width: 0;
        height: 100%;
        min-height: 200px;
        margin-right: -0.25em;
        vertical-align: middle;
      }

      /*
         :::::::::::::::::::::::::::::::::::::::::::::
         Bootstrap 4 standard mobile-first breakpoints
      */

      /* 
         Extra small devices (portrait phones, less than 544px)
         No media query since this is the default in Bootstrap because it is "mobile first"
      */

      /* Small devices (landscape phones, 544px and up) */

      @media (min-width: 544px) {
        .picsponsive>figure {
          width: calc(100% / 2);
        }
        .picsponsive>figure>img {
          max-height: 500px;
        }
      }

      /* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */

      @media (min-width: 768px) {
        .picsponsive>figure {
          width: calc(100% / 3);
        }
        .picsponsive>figure>img {
          max-height: 400px;
        }
      }

      /* Large devices (desktops, 992px and up) */

      @media (min-width: 992px) {
        .picsponsive>figure {
          width: calc(100% / 4);
        }
        .picsponsive>figure>img {
          max-height: 300px;
        }
      }

      /* Extra large devices (large desktops, 1200px and up) */

      @media (min-width: 1200px) {
      
      }

    </style>
  </head>

  <body>
    <div class="picsponsive">
      <figure> <img src="https://dummyimage.com/medrect" alt="Image 1">
        <figcaption>Lorem ipsum</figcaption>
      </figure>
      <figure> <img src="https://dummyimage.com/sqrpop" alt="Image 2">
        <figcaption>Consectetur adipiscing elit</figcaption>
      </figure>
      <figure> <img src="https://dummyimage.com/mibar" alt="Image 3">
        <figcaption>Morbi venenatis</figcaption>
      </figure>
      <figure> <img src="https://dummyimage.com/vertrec" alt="Image 4">
        <figcaption>Nullam suscipit metus id sem eleifend, ut molestie eros dictum</figcaption>
      </figure>
      <figure> <img src="https://dummyimage.com/medrect" alt="Image 5">
        <figcaption>Suspendisse malesuada massa lorem</figcaption>
      </figure>
      <figure> <img src="https://dummyimage.com/lrgrec" alt="Image 6">
        <figcaption>Aliquam in dolor</figcaption>
      </figure>
      <figure> <img src="https://dummyimage.com/sqrpop" alt="Image 7">
        <figcaption>Nunc eget lacus at arcu scelerisque gravida ut non lectus</figcaption>
      </figure>
      <figure> <img src="https://dummyimage.com/vertrec" alt="Image 8">
        <figcaption>Fusce suscipit</figcaption>
      </figure>
    </div>
  </body>

</html>

Testato su win10 con FF, CH, Edge, IE11

Discussione: [pillola] Tabella responsive di immagini con descrizione

Strumenti discussione

Ricerca discussione

Visualizza

[pillola] Tabella responsive di immagini con descrizione

Tag per questa discussione

Permessi di invio