Prerequisiti: Scelta dei breakpoint.
Immagini adattabili con CSS
Immagini adattabili con CSS: fondamenti.
Un’immagine informativa va inserita con img e testo alternativo appropriato. max-width: 100% impedisce di superare la larghezza del contenitore; height: auto conserva il rapporto fra le dimensioni quando la larghezza cambia. Queste regole non scelgono automaticamente il file migliore da scaricare: srcset e picture appartengono alla selezione delle risorse in HTML.
Come funziona: immagini adattabili con css
Immagini adattabili con CSS: comportamento nel browser.
Per una scheda con area immagine di proporzioni uniformi puoi usare un box con aspect-ratio e object-fit. cover riempie il box conservando il rapporto ma può ritagliare; contain mostra l’immagine intera e può lasciare spazio libero. Il ritaglio deve rispettare il soggetto informativo: non tagliare un dettaglio necessario solo per uniformare le schede.
Scelte di utilizzo e limiti
Immagini adattabili con CSS: progetto e verifica.
Dichiarare width e height nell’HTML aiuta il browser a riservare proporzioni prima del caricamento. Il CSS può comunque rendere l’immagine fluida. Prova immagini di proporzioni diverse, non soltanto una fotografia perfettamente adatta al box.
Esempio commentato
Immagini adattabili con CSS: HTML e CSS.
Esempio con stile esterno. Il documento index.html collega il file stile.css mediante il tag link nella head.
Documento HTML completo
<!doctype html>
<html lang="it">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Immagini responsive con CSS</title>
<link rel="stylesheet" href="stile.css">
</head>
<body>
<figure><img class="immagine" src="immagine.svg" width="800" height="450" alt="Tre schede illustrate in una griglia"><figcaption>Immagine dimostrativa locale.</figcaption></figure>
</body>
</html>
File stile.css
.immagine { max-width: 100%; height: auto; display: block; }
figure { max-width: 35rem; margin: 0; }
Risultato nel browser
L’esempio include un’immagine locale. Le dimensioni HTML descrivono il rapporto; il CSS consente la riduzione nel contenitore.
| Proprietà | Valore nell’esempio | Significato |
|---|---|---|
max-width | 100% | Limite superiore alla larghezza. |
height | auto | Altezza secondo box model e contesto. |
display | block | Tipo di scatola e contesto di layout. |
margin | 0 | Spazio esterno della scatola. |
LABORATORIO
Sperimentare: Immagini adattabili con CSS
L’esempio include un’immagine locale. Le dimensioni HTML descrivono il rapporto; il CSS consente la riduzione nel contenitore.
Obiettivo: Comprendere e applicare immagini adattabili con css attraverso esempi e verifica nel browser.
Software: editor di testo e browser con DevTools; Tempo: 15 minuti.
Preparazione: scarica l’esempio completo e estrai lo ZIP. Apri index.html nel browser. Puoi anche aprire l’esempio online.
Apri il file stile.css nell’editor. Le lezioni iniziali usano un documento già preparato per concentrarsi sulle regole; il collegamento esterno e lo stile interno vengono spiegati nelle lezioni dedicate. Le modifiche nei DevTools sono normalmente temporanee.
Procedura passo passo
- Osserva il punto di partenza: apri l’esempio, confronta markup e regole e individua il selettore o il contesto di layout rilevante.
- Esegui la modifica: Restringi la finestra. Poi assegna a figure aspect-ratio: 1 / 1 e all’immagine width: 100%, height: 100% e object-fit: cover per osservare il ritaglio nel box quadrato.
- Salva e ricarica la pagina dopo ogni modifica. Confronta gli elementi che devono cambiare con quelli che devono restare invariati.
- Ispeziona il risultato: usa il menu Ispeziona e controlla Styles/Regole e Computed/Calcolato. Per layout Flex o Grid attiva l’overlay, se disponibile.
- Annota causa ed effetto: scrivi il valore o la struttura iniziale, il cambiamento e il risultato. Ripristina il punto di partenza prima dell’esercizio autonomo.
La resa fluida conserva il rapporto originale; in un box quadrato con height: 100% e cover può essere ritagliata.
Il font e alcuni dettagli dell’interfaccia dipendono dal browser. Valuta la proprietà e il comportamento descritti, non una corrispondenza perfetta con uno screenshot.
Verifica del risultato
| Controllo | Criterio |
|---|---|
| Effetto specifico | La resa fluida conserva il rapporto originale; in un box quadrato con height: 100% e cover può essere ritagliata. |
| Corrispondenza del codice | Individua la dichiarazione o la relazione HTML responsabile della differenza. |
| Persistenza | Riporta la modifica nel file e verifica dopo un ricaricamento. |
| Spiegazione | Motiva la differenza senza affidarti soltanto a uno screenshot. |
Esercizio autonomo
Usa un box quadrato e mostra tutta l’immagine con contain.
Consegna: file modificati e una breve spiegazione di selettore, proprietà e risultato. Criterio di riuscita: il cambiamento richiesto funziona dopo il ricaricamento e non taglia informazioni indispensabili.
figure { width: 100%; max-width: 25rem; aspect-ratio: 1 / 1; }
.immagine { width: 100%; height: 100%; object-fit: contain; }Integra la soluzione nel punto pertinente: modifica o sostituisci le regole coinvolte invece di accumulare dichiarazioni contraddittorie. Le altre parti dell’esempio restano necessarie.
Verifica dei concetti
Immagini adattabili con CSS: interpretazione e applicazione.
Seleziona una domanda per visualizzare la risposta e confrontarla con la tua.
1. Quale valore mantiene tutta l’immagine visibile in un box? ▾
2. Come si interpreta il codice dell’esempio? ▾
3. Quale risultato permette di verificare la modifica del laboratorio? ▾
4. Quale attenzione evita un’interpretazione sbagliata? ▾
Riferimento tecnico: MDN — riferimento CSS. Cerca le proprietà o i selettori utilizzati nell’esempio.