Responsive Web Design - Foto
Utilizzare l'attributo width
Se l'attributo width è impostato al 100%, l'immagine viene realizzato in conformità con la gamma superiore e inferiore di funzioni reattive:
Si noti che nell'esempio precedente, l'immagine sarà maggiore della sua immagine originale. Possiamo usare attributo max-width una buona soluzione a questo problema.
Utilizzando max-width proprietà
Se la proprietà max-width è impostato su 100%, l'immagine non sarà mai più grande della sua dimensione originale:
Aggiungere pagine di immagini
immagine di sfondo
Immagine di sfondo può rispondere a ridimensionare o lo zoom.
Di seguito sono tre diversi metodi:
1. Se la proprietà background-size è impostato su "contenere", l'immagine di sfondo sarà adattabile rapporto di area di contenuto. Foto mantengono le proporzioni invariate:
Questo è il codice CSS:
Esempi
width: 100%;
altezza: 400px;
background-image: url ( 'img_flowers.jpg ');
background-repeat: no-repeat;
background-size: contenere;
border: 1px solid red;
}
Prova »
2. Se la proprietà background-size è impostato su "100% al 100%", l'immagine di sfondo sarà esteso per coprire l'intera regione:
Esempi
Questo è il codice CSS:
width: 100%;
altezza: 400px;
background-image: url ( 'img_flowers.jpg ');
background-size: 100% 100% ;
border: 1px solid red;
}
Prova »
3. Se la proprietà background-size è impostato su "coprire", l'immagine di sfondo viene espansa per essere grande abbastanza per coprire completamente lo sfondo in modo che l'area dell'immagine di sfondo. Si noti che la proprietà rimane le proporzioni dell'immagine in modo da una parte dell'immagine di sfondo non possono essere visualizzati sullo sfondo zona di posizionamento.
Questo è il codice CSS:
Esempi
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: cover;
border: 1px solid red;
}
Prova »
Dispositivi diversi mostrano un quadro diverso
Grandi immagini possono essere visualizzate sul grande schermo, ma non mostrano bene sul piccolo schermo. Non abbiamo bisogno di caricare il piccolo schermo nella foto grande, in modo che sta interessando la velocità di caricamento. Così possiamo usare le media query, a seconda del dispositivo per visualizzare un'immagine diversa.
La seguente immagine grande e piccola immagine verranno visualizzati su diversi dispositivi:
Esempi
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');
}
}
Prova »
È possibile utilizzare le media query min-device-width sostituto min-width attributo, rileverà la larghezza del dispositivo al posto della larghezza del browser. Ripristinare la dimensione del browser, la dimensione dell'immagine non cambia.
Esempi
body {
background-image: url ( 'img_smallflower.jpg ');
}
/ * Dispositivo più grande di 400px (anche uguale a): * /
@media solo schermo e (min-device -width: 400px) {
body {
background-image: url ( 'img_flowers.jpg ');
}
}
Prova »
HTML5 <immagine> elemento
di HTML5 <picture> elemento può essere impostato più immagini.
Supporto per il browser
| elemento | |||||
|---|---|---|---|---|---|
| <Immagine> | Non supporta | 38.0 | 38.0 | Non supporta | 25,0 |
<picture> elemento simile al <video> e <audio> elementi. Diversi dispositivi possono essere risorse, risorsa prima serie di utilizzo preferita:
Esempi
<Fonte srcset = "img_smallflower.jpg" media = "(max-width: 400px)">
<Srcset Source = "img_flowers.jpg">
<Img src = "img_flowers.jpg" alt = "Fiori">
</ Foto>
Prova »
srcset proprietà deve essere la definizione della risorsa immagine.
media attributo è facoltativo, in mezzi interroga CSS @media governare Vedi Dettagli.
Non sostenere <picture> elementi del browser è possibile definire <img> , invece elemento.