Corsi on-line

Immagini responsive e attributi HTML

Secondo i dettami del Responsive Design le immagini dovrebbero essere in grado di scalare proporzionalmente al proprio contenitore, l’output atteso verrebbe quindi prodotto attraverso un dimensionamento (o, se preferite, “adattamento”) generato sulla base delle modifiche che coinvolgono il contesto in cui sono inserite; ottenere immagini responsive tramite CSS non è particolarmente complesso, basterà agire sul valore associato all’elemento “max-width” in questo modo:

img {
    max-width:100%;
}

In pratica, la soluzione proposta impedisce a qualunque elemento “img” di diventare più largo rispetto al proprio contenitore; nel caso in cui quest’ultimo divenga più piccolo dell’immagine che contiene, allora essa scalerà proporzionalmente a tale ridimensionamento. Esiste però un limite che andrebbe preso in considerazione, quello che si manifesta quando gli attributi relativi a larghezza e altezza (“width” e “height”) vengono definiti tramite il markup HTML.

Responsive-DesignIn questo caso la valorizzazione dell’elemento “max-width” in CSS non sarebbe sufficiente per ottenere immagini responsive, questo per via del fatto che esso non agisce sull’altezza delle immagini che rimane immutata; in alcuni casi gli attributi dimensionali vengono specificati direttamente nell’HTML per motivazioni legate alle prestazioni, quindi, come ottenere comunque ridimensionamenti omogenei anche in loro presenza?

In questo caso la soluzione potrebbe essere disponibile tramite l’elemento “height” impostato su “auto” e utilizzato nel modo seguente subito dopo “max-width”:

img {
    max-width:100%;
    height:auto;
}

La regola precedentemente definita determinerà l’override di tutti gli attributi “height” presenti all’interno del markup, ciò consentirà di ottenere un dimensionamento proporzionale al contenitore di riferimento.

Per approfondire.

Post correlati
  • Simone Brigante

    È tutto il giorno che cerco un tutorial per le immagini responsive, visto che online non se ne trovano di buoni. Guarda caso adesso trovo questo semplice ma splendido tutorial. Grazie!

I più letti del mese
Tematiche