Assegna all’immagine attributi HTML width e height accurati, poi usa il CSS per rendere responsive la larghezza visualizzata e automatica l’altezza. Le dimensioni forniscono in anticipo un rapporto d’aspetto senza vincolare l’immagine a quelle dimensioni di visualizzazione. MDN: Immagini multimediali

Questa guida è pensata per chi modifica una pagina HTML su Mac e vuole che un’immagine si ridimensioni insieme al contenitore, riservando spazio proporzionale prima del caricamento. L’esempio usa un elemento grafico astratto autonomo, così puoi provare il comportamento del ridimensionamento senza scaricare risorse.

Come possono le dimensioni riservare spazio senza fissare le dimensioni di visualizzazione?

Un’immagine ha dimensioni intrinseche, per esempio 1200 per 800, e dimensioni di visualizzazione determinate dal layout. Questi valori possono differire. Gli attributi dimensionali HTML forniscono indicazioni sul dimensionamento; il foglio di stile può sovrascrivere la larghezza e l’altezza visualizzate. Lo standard HTML associa inoltre agli attributi un rapporto d’aspetto preferito nella forma auto 1200 / 800. Standard HTML: attributi per contenuti incorporati e immagini

Per una risorsa di 1200 per 800, il rapporto è 3:2. Una volta definita la larghezza visualizzata dal layout, il browser può calcolare un’altezza proporzionale prima che la risorsa abbia terminato il caricamento. MDN consiglia di specificare entrambe le dimensioni insieme al CSS responsive per ridurre gli spostamenti del layout causati dalle immagini. MDN: Immagini multimediali

La divisione pratica delle responsabilità è semplice: l’HTML descrive le dimensioni della risorsa e il CSS descrive come si adatta alla pagina. Mantieni coerenti queste indicazioni. Specificare le dimensioni è utile anche quando l’immagine non verrà mai mostrata nella sua dimensione originale.

Scegli se l’immagine deve riempire il contenitore

Usa il seguente frammento CSS quando l’immagine deve occupare tutta la larghezza disponibile nel contenitore. Presuppone che l’immagine abbia la classe responsive-image e attributi dimensionali accurati:

.responsive-image {
  display: block;
  width: 100%;
  height: auto;
}

Se invece l’immagine deve ridursi quando necessario, mantenendo la larghezza dichiarata quando c’è più spazio, usa questo frammento alternativo:

.responsive-image {
  display: block;
  max-width: 100%;
  height: auto;
}

Il secondo schema è l’approccio documentato da MDN per mantenere un’immagine entro i limiti di un contenitore più stretto. In questo semplice layout, width: 100% riempie il contenitore, mentre max-width: 100% imposta un limite massimo. Mantieni height: auto in entrambi gli schemi, così l’altezza può seguire il rapporto d’aspetto anziché restare impostata all’altezza HTML. MDN: Immagini multimediali

Prova una pagina completa con immagini responsive sul tuo Mac

Apri TextEdit, scegli File > Nuovo, poi scegli Formato > Converti in testo semplice. Incolla il documento completo qui sotto. Salvalo come shape-demo.html; se TextEdit ti chiede quale estensione usare, scegli Usa .html. Questi sono i passaggi documentati da Apple per creare un file HTML. Apple: Lavorare con documenti HTML in TextEdit sul Mac

Il documento include il CSS e un SVG codificato che contiene una composizione originale di cerchi e rettangoli. Non occorre installare altri file o pacchetti. La risorsa e l’elemento immagine dichiarano entrambi dimensioni di 1200 per 800.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Shape sizing demo</title>
  <style>
    body {
      margin: 0;
      padding: 24px;
      font-family: system-ui, sans-serif;
      line-height: 1.5;
      color: #24343b;
    }

    main {
      max-width: 900px;
      margin: 0 auto;
    }

    .responsive-image {
      display: block;
      width: 100%;
      height: auto;
      background: #edf2f4;
    }
  </style>
</head>
<body>
  <main>
    <h1>Shape study A</h1>
    <p>Resize the window to change the composition's displayed size.</p>
    <img
      class="responsive-image"
      width="1200"
      height="800"
      alt="A blue circle beside an amber rounded rectangle."
      src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='800' viewBox='0 0 1200 800'%3E%3Crect width='1200' height='800' fill='%23edf2f4'/%3E%3Ccircle cx='360' cy='400' r='180' fill='%234b8090'/%3E%3Crect x='660' y='220' width='300' height='360' rx='40' fill='%23d6a96b'/%3E%3C/svg%3E">
    <p>Marker B: this paragraph follows the image in normal document flow.</p>
  </main>
</body>
</html>

Apri il file salvato nel browser e restringi la finestra. La composizione dovrebbe ridursi in proporzione e Marker B dovrebbe restare sotto di essa. Allargando la finestra, la composizione cresce finché il contenitore dell’esempio raggiunge il limite massimo di 900 pixel. Questo limite è una scelta illustrativa di progettazione della pagina, non un requisito della tecnica di riserva dello spazio.

La risorsa incorporata si carica subito, quindi questo esempio mostra il ridimensionamento responsive, non un download visibilmente ritardato. L’SVG codificato è stato analizzato e le sue dimensioni sono state verificate con Python; sono stati eseguiti anche i calcoli riportati sotto. Durante la preparazione non è stato eseguito il rendering nel browser.

Per adattare la pagina a un’altra risorsa, sostituisci il valore di src e aggiorna entrambe le dimensioni HTML in modo che corrispondano alla risorsa. In questi attributi usa numeri interi senza unità, come 1200, anziché 1200px. MDN specifica questo formato per le dimensioni delle immagini. MDN: L’elemento di incorporamento di immagini

Quanto spazio dovrebbe riservare il browser?

Per questo semplice layout, senza bordi né spaziatura interna sull’immagine, calcola l’altezza prevista così:

altezza visualizzata = larghezza visualizzata × altezza della risorsa ÷ larghezza della risorsa

Applicando le dimensioni dell’esempio, 1200 per 800, si ottengono questi risultati indicativi. Le larghezze si riferiscono al riquadro del contenuto dell’immagine, non all’intera finestra del browser.

Larghezza visualizzata dell’immagine Altezza proporzionale
300 pixel CSS 200 pixel CSS
600 pixel CSS 400 pixel CSS
900 pixel CSS 600 pixel CSS

Questo calcolo è anche un utile strumento diagnostico. Supponiamo che la risorsa effettiva sia di 1200 per 800, ma che l’HTML dichiari erroneamente 1200 per 600. Con una larghezza visualizzata di 600 pixel, il rapporto dichiarato suggerisce un’altezza di 300 pixel, mentre il rapporto effettivo ne richiede 400. Quando diventa disponibile il rapporto naturale, potrebbe quindi essere necessaria una correzione di 100 pixel.

La correzione dipende dalla parte auto dell’indicazione del rapporto: un’immagine con un rapporto d’aspetto naturale usa quel rapporto quando diventa disponibile. Perciò gli attributi accurati sono importanti anche se il foglio di stile è corretto. La specifica CSS definisce questa distinzione tra un rapporto specificato e il rapporto naturale di un elemento sostituito. CSS Box Sizing Module Level 4: rapporti d’aspetto preferiti

Quando dovresti usare invece aspect-ratio in CSS?

Usa un rapporto CSS esplicito quando il layout definisce deliberatamente la forma del riquadro dell’immagine. Per esempio, una tessera quadrata è un requisito diverso dal mostrare proporzionalmente l’intera composizione 3:2.

Il seguente è un frammento CSS sostitutivo per l’esempio completo. Sostituisci la regola .responsive-image esistente con questa:

.responsive-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: #edf2f4;
}

Qui, aspect-ratio: 1 / 1 richiede un riquadro quadrato. La larghezza resta responsive e l’altezza automatica viene calcolata in base a tale larghezza. Per influire sul dimensionamento, un rapporto d’aspetto preferito richiede almeno una dimensione automatica; impostare entrambe le dimensioni in modo esplicito annulla questo ruolo. MDN: aspect-ratio

La dichiarazione object-fit: contain mantiene visibile l’intera composizione nel riquadro quadrato, lasciando spazio inutilizzato dove le forme non riempiono la risorsa. Se cambi il valore in cover, il quadrato si riempie ma parte della composizione viene ritagliata. Scegli consapevolmente questo comportamento: il ritaglio può eliminare parti significative dell’immagine. MDN: object-fit

Per un rapporto temporaneo che dovrebbe cedere il passo al rapporto naturale della risorsa, CSS supporta anche un valore come aspect-ratio: auto 3 / 2. Se la risorsa è diversa, dopo il caricamento le proporzioni del riquadro possono cambiare. Un rapporto senza auto esprime invece la forma preferita del layout. CSS Box Sizing Module Level 4: rapporti d’aspetto preferiti

Cosa dovresti controllare se l’immagine continua a spostarsi o si deforma?

Controlla la risorsa e il layout in quest’ordine:

  1. Verifica entrambe le dimensioni HTML. Devono descrivere accuratamente la risorsa. Una larghezza corretta abbinata a un’altezza errata fornisce comunque un rapporto sbagliato.
  2. Controlla l’altezza impostata dal CSS. Nell’esempio proporzionale dovrebbe essere auto. Un’altra regola corrispondente potrebbe assegnare un’altezza fissa.
  3. Controlla la larghezza visualizzata. Il calcolo dello spazio riservato dipende dalla larghezza stabilita dal layout. Ridimensionare la finestra del browser cambia intenzionalmente tale larghezza e la relativa altezza proporzionale.
  4. Controlla le regole del rapporto esplicito. Un rapporto CSS quadrato e un rapporto naturale 3:2 esprimono intenzioni di dimensionamento diverse.
  5. Controlla separatamente l’adattamento dell’immagine. contain e cover determinano come la risorsa si adatta al riquadro; non forniscono le dimensioni mancanti del riquadro.

Questi controlli seguono la distinzione tra il riquadro dell’elemento, il suo rapporto preferito e la risorsa visualizzata al suo interno. La guida di MDN sui rapporti d’aspetto spiega in che modo le dimensioni esplicite influiscono sul dimensionamento proporzionale, mentre il riferimento a object-fit documenta l’adattamento e il ritaglio. MDN: Comprendere e impostare i rapporti d’aspetto, MDN: object-fit

Anche la compatibilità con i browser ha dei limiti. MDN indica che la proprietà CSS aspect-ratio è ampiamente disponibile nei browser da settembre 2021. Questo non garantisce il supporto in tutti i browser più vecchi, né indica una data di compatibilità per ogni comportamento di associazione delle dimensioni HTML. Se tra i requisiti rientra un browser meno recente, consulta le informazioni di compatibilità nella documentazione. MDN: aspect-ratio

Per il normale caso di un’immagine proporzionale, inizia con dimensioni HTML accurate e CSS responsive. Usa un rapporto CSS esplicito quando la pagina richiede una forma specifica per il riquadro. Insieme, queste scelte ti consentono di riservare lo spazio desiderato e di lasciare che le dimensioni visualizzate seguano il layout della pagina.

Fonti