Responsive Web Design - Immagini
Ridimensiona la finestra del browser per vedere come l'immagine viene ridimensionata per adattarsi alla pagina.
Utilizzo della proprietà larghezza
Se la widthproprietà è impostata su una percentuale e la heightproprietà è impostata su "auto", l'immagine sarà reattiva e verrà scalata su e giù:
Esempio
img {
width: 100%;
height: auto;
}
Si noti che nell'esempio sopra, l'immagine può essere ingrandita per essere più grande della sua dimensione originale. Una soluzione migliore, in molti casi, sarà invece quella di utilizzare la
max-widthproprietà.
Utilizzo della proprietà max-width
Se la max-widthproprietà è impostata su 100%, l'immagine verrà ridimensionata se necessario, ma non verrà mai aumentata per essere più grande della sua dimensione originale:
Esempio
img {
max-width: 100%;
height: auto;
}
Aggiungi un'immagine alla pagina Web di esempio
Esempio
img {
width: 100%;
height: auto;
}
Immagini di sfondo
Le immagini di sfondo possono anche rispondere al ridimensionamento e al ridimensionamento.
Qui mostreremo tre diversi metodi:
1. Se la background-sizeproprietà è impostata su "contiene", l'immagine di sfondo verrà ridimensionata e tenterà di adattarsi all'area del contenuto. Tuttavia, l'immagine manterrà le sue proporzioni (la relazione proporzionale tra la larghezza e l'altezza dell'immagine):
Ecco il codice CSS:
Esempio
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-repeat: no-repeat;
background-size: contain;
border: 1px solid red;
}
2. Se la background-sizeproprietà è impostata su "100% 100%", l'immagine di sfondo si estenderà per coprire l'intera area del contenuto:
Ecco il codice CSS:
Esempio
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: 100% 100%;
border: 1px solid red;
}
3. Se la background-sizeproprietà è impostata su "cover", l'immagine di sfondo verrà ridimensionata per coprire l'intera area del contenuto. Si noti che il valore "copertina" mantiene le proporzioni e alcune parti dell'immagine di sfondo potrebbero essere ritagliate:
Ecco il codice CSS:
Esempio
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: cover;
border: 1px solid red;
}
Immagini diverse per dispositivi diversi
Un'immagine grande può essere perfetta su un grande schermo di computer, ma inutile su un piccolo dispositivo. Perché caricare un'immagine di grandi dimensioni quando devi comunque ridimensionarla? Per ridurre il carico, o per qualsiasi altro motivo, puoi utilizzare le media query per visualizzare immagini diverse su dispositivi diversi.
Ecco un'immagine grande e un'immagine più piccola che verranno visualizzate su diversi dispositivi:
Esempio
/* For width smaller than 400px: */
body {
background-image:
url('img_smallflower.jpg');
}
/*
For width 400px and larger: */
@media only screen and (min-width: 400px)
{
body {
background-image: url('img_flowers.jpg');
}
}
Puoi utilizzare la query multimediale min-device-width, invece di min-width, che controlla la larghezza del dispositivo, invece della larghezza del browser. Quindi l'immagine non cambierà quando ridimensioni la finestra del browser:
Esempio
/* For devices smaller than 400px: */
body {
background-image:
url('img_smallflower.jpg');
}
/*
For devices 400px and larger: */
@media only screen and (min-device-width: 400px)
{
body {
background-image: url('img_flowers.jpg');
}
}
L'elemento HTML <immagine>
L'elemento HTML <picture>offre agli sviluppatori Web una maggiore flessibilità nella specifica delle risorse di immagine.
The most common use of the <picture>
element will be for images used in responsive designs. Instead of having one
image that is scaled up or down based on the viewport width, multiple images can
be designed to more nicely fill the browser viewport.
The <picture> element works similar to the <video> and
<audio> elements. You set up different sources, and the first source that fits the
preferences is the one being used:
Example
<picture>
<source srcset="img_smallflower.jpg" media="(max-width:
400px)">
<source srcset="img_flowers.jpg">
<img
src="img_flowers.jpg" alt="Flowers">
</picture>
The srcset attribute is required, and defines the source of the image.
The media attribute is optional, and accepts the media queries you find in
CSS @media rule.
You should also define an <img> element for browsers that do not support the
<picture> element.