Immagine di intestazione adattiva senza estensione

ssl · Messaggio da **ssl** » 10/01/2024, 19:59

Per rendere adattiva l'immagine dell'intestazione mantenendo queste proporzioni, aggiungila al file del foglio di stile del tuo stile personale

Codice: Seleziona tutto

.headerbar {
    background-color: transparent;
    background-image: url("collegamento_alla_tua_immagine");
    background-position: 50% 0;
    background-size: cover;
    width: auto;
    height: 170px;
    position: relative;
} 
@media only screen and (max-width: 600px) {
    .headerbar {
        border-radius: 0px;
        width: auto; 
        height: 90px; 
        object-fit: cover;
        object-position: center;        
        }
   .logo {
      display: inline-block;
      width: auto;
      height: auto;
      }
   .logo:hover {
      text-decoration: none;
      }
   }

Utilizzare preferibilmente un file immagine di 1200 x 200

object-fit è una proprietà CSS utile per rendere reattiva un'immagine, specificandone l'altezza.

object-fit: cover; l'elemento è dimensionato per riempire l'intera area del contenuto del suo contenitore mantenendo le sue proporzioni. Se l'elemento è più grande dell'area del contenuto, verrà ritagliato.

object-position permette di specificare il posizionamento di un elemento all'interno del suo contenitore le cui dimensioni sono definite dalle proprietà CSS width e height

object-position: center; posiziona l'elemento sostituito in '50% 50%'