Immagini proporzionali con i CSS

Le immagini hanno una loro ben definita dimensione, ma in alcuni casi risulta comodo dimensionarle in modo proporzionale. Questa è costituita da una colonna, larga il 40% della finestra, con un'immagine posta prima dei contenuti (come per formare una sorta di copertina). L'immagine è larga 300px e alta 133px, ma si vuole che occupi tutta la larghezza della colonna. Poiché l'area dei contenuti ha la larghezza dipendente dalla dimensione della finestra del browser, non è noto a priori quanto l'immagine dovrà essere larga.

Impostando, tramite i CSS, la larghezza dell'immagine con le unità percentuali, l'area occupata dall'immagine stessa dipenderà dalla larghezza della finestra del browser, come illustrato nella seguente immagine.

confronto dei risultati ottenuti con due finestre di dimensioni differenti

L'immagine di copertina, che dovrà essere dimensionata in modo proporzionale, sarà selezionata attraverso l'attributo id="copertina":

<div id="contenuti">
<h1>Esempio</h1>
<img id="copertina" src="..." alt="..." title="..." />
<p>Lorem ipsum dolor ...</p>
</div>

Come precedentemente detto, l'area dei contenuti occuperà il 40% dell larghezza della finestra, mentre l'immagine di copertina occuperà il 100% della larghezza dei contenuti:

#contenuti {
width:40%;
padding:0 1em 1em 1em;
}
img#copertina { width:100% }

L'utilizzo di immagini proporzionali può essere utile in numerosi casi, nell'esempio associato a questo articolo ne abbiamo visto solo uno, ma non sempre è possibile, poiché non tutte le immagini sono adatte ad essere ridimensionate. Ad esempio una foto può essere ridimensionata con successo, mentre lo stesso non vale per un'immagine con poche sfumature e dai bordi molto netti (come ad esempio un logo).



Ti potrebbe interessare anche

commenta la notizia

C'è 1 commento
Pier Paolo
Condividi le tue opinioni su questo articolo!