Come centrare in assoluto una immagine adattiva coi CSS

 Per il centraggio assoluto in orizzontale e verticale  degli elementi sulla pagina, ci sono  vari metodi, e ne abbiamo parlato anche noi  
Quindi, a questo proposito, non rivelerò nulla di nuovo, per quanto riguarda  il centrare  degli elementi sulla pagina web perché   tutto è estremamente chiaro.

Una volta, quando sviluppavo un  lightbox (per mostrare immagini stancati dalla pagina dopo il clic sul originale ), dovevo assicurarmi che le immagini visualizzate non solo fossero visualizzate in modo assoluto al centro, ma devono rimanere  anche adattative, cioè. flessibili e correttamente visualizzati  sugli schermi di vari dispositivi di utenti, indipendentemente dalle dimensioni dell'immagine originale.
E ho trovato  subito una soluzione per centrare ho usato flexbox per il contenitore lightbox e uno dei metodi di trasformazione più semplici: translate (-50%, -50%);  applicandolo direttamente al immagine.

 

 

<style type="text/css">
        .lightbox {
         position: absolute;
         display: flex;
         justify-content: center;        
          align-items: center;
          width: 100%;
          height: 100%;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          z-index: 10000;
          background: rgba(57, 70, 78, 0.8);
        }
        .lightbox__center {
          width: 0;
          height: 0;
        }
        .lightbox img {
          position: absolute;
          max-width: 100%;
          max-height: 100%;
        
          transform: translate(-50%, -50%);
        
          box-shadow: 0 12px 15px 0 rgba(0,0,0,0.25);
        }
    </style>
<div id="popup-box" class="lightbox">
    <div class="lightbox__center">
        <img  src="/image01.jpg">
    </div>
</div>

Il metodo non è certamente l'ideale, richiede un markup addizionale. Il trucco sta nel fatto che  l'immagine con i valori massimi possibili di altezza e larghezza max-width e max-height al 100% va messo in un  div con  altezza e larghezza messi a zero , che a sua volta è già messo nel contenitore con l'altezza e la larghezza impostati a 100% del nostro  lightbox.
E per capire bene il funzionamento, vale la pena di soffermarsi più dettagliatamente sui vantaggi e gli svantaggi di questo metodo. Per quanto riguarda centraggio, utilizzando i FlexBox  altezza o larghezza del immagine può essere qualsiasi, è certamente un vantaggio. Utilizzando proprietà trasform,  si ottiene il minimo di codice e assicurazione  che  l'altezza cambiera, pero potrebbe andare in conflitto con altre proprietà translate inserite nel codice, che e comunque facilmente risolvibile basterebbe trovare dove va in conflitto.

  Quindi da tutto  quanto che è scritto sopra, si possa capire che in certi situazioni ci sono soluzioni estremamente semplici e funzionanti se avete la sua idea riguardo argomento scriveteci nei commenti 

Vorrei alla fine soltanto sottolineare che l'articolo riguarda soltanto il posizionamento di immagini  e come creare un light'box leggi  articoli che riguardano finestre modali

 

 
 
 
Letto 255 volte

corso CSS pratica

Impara HTML e CSS da zero al risulto!

Da piccolo hai imparato leggere leggendo libri. E con aiuto del nostro corso imparerai CSS e HTML costruendo un sito web da un templat in PSD .

Scopri il corso