Immagini e loro proprietà nei CSS. Come ridimensionare un'immagine in css su html Come specificare la dimensione dell'immagine in css

Per modificare le dimensioni di un'immagine utilizzando il tag HTML Vengono forniti gli attributi width (larghezza) e Height (altezza). Come valore vengono utilizzati i pixel e gli argomenti devono corrispondere alle dimensioni fisiche dell'immagine. Ad esempio, nella Fig. La Figura 10.6 mostra un'immagine che ha dimensioni di 100x111 pixel.

Riso. 10.6. Immagine in formato originale

Di conseguenza, il codice HTML per posizionare questa immagine è fornito nell'esempio 10.4.

Esempio 10.4. Dimensioni del disegno

Se le dimensioni dell'immagine vengono specificate esplicitamente, il browser le utilizza per visualizzare l'area vuota corrispondente all'immagine durante il processo di caricamento del documento (Fig. 10.7). Altrimenti, il browser attende il caricamento completo dell'immagine, dopodiché modifica la larghezza e l'altezza dell'immagine (Fig. 10.8). In questo caso, il testo potrebbe essere riformattato, poiché la dimensione originale dell'immagine non è nota e viene automaticamente impostata su piccola.

Riso. 10.7. Le dimensioni dell'immagine non sono indicate e non è stata ancora caricata

Riso. 10.8. Immagine caricata, testo riformattato

La larghezza e l'altezza dell'immagine possono essere modificate più piccole o più grandi. Ciò tuttavia non influisce in alcun modo sulla velocità di caricamento dell'immagine, poiché la dimensione del file rimane invariata. Pertanto, rimpicciolisci con cautela poiché... Ciò potrebbe creare confusione tra i lettori sul motivo per cui un'immagine così piccola impiega così tanto tempo a caricarsi. Ma aumentare le dimensioni porta all'effetto opposto: la dimensione dell'immagine è grande, ma il file si carica più velocemente rispetto a un'immagine della stessa dimensione.

Nella fig. 10.9 mostra la stessa immagine mostrata in Fig. 10.6, ma con larghezza e altezza doppie.

Riso. 10.9. Visualizzazione dell'immagine ingrandita nel browser

Il codice per tale disegno rimarrà praticamente invariato ed è mostrato nell'Esempio 10.5.

Esempio 10.5. Modificare le dimensioni di un'immagine

Questo ridimensionamento è chiamato ricampionamento e l'algoritmo del browser ha capacità inferiori rispetto agli editor grafici. Pertanto è necessario ingrandire le immagini in questo modo solo in casi particolari, altrimenti la qualità dell'immagine si deteriora eccessivamente. È meglio usare qualche tipo di programma di grafica. L'eccezione riguarda i disegni contenenti aree rettangolari. Nella fig. La Figura 10.10 mostra un file di pattern che occupa 54 byte e ha una dimensione originale di 8 x 8 pixel, ingrandita a 150 pixel.

Riso. 10.10. Immagine ingrandita

I browser utilizzano due algoritmi per il ricampionamento: bicubico (fornisce bordi uniformi e una gamma tonale uniforme di colori) e punti più vicini (preserva il set originale di colori e bordi netti). Ultime versioni i browser utilizzano un algoritmo bicubico, mentre i browser più vecchi, al contrario, utilizzano un algoritmo basato sui punti più vicini.

Questa lezione è una sorta di continuazione di quella precedente, in cui abbiamo visto, ora è il momento di approfondire la tua conoscenza e guardare Proprietà CSS Immagini.

Dimensioni dell'immagine nei CSS

Scopriamo cosa c'è di nuovo qui, ho creato una classe img in cui ho specificato le dimensioni dell'immagine, larghezza è la larghezza e altezza è l'altezza, ho specificato le dimensioni maggiori di quelle originali in modo che tu possa vedere chiaramente come l'immagine cambierà.

Per chiarezza, fornirò un esempio in cui ci sarà molto testo e vedrai quali rientri dell'immagine ci sono in questo esempio Utilizzeremo la proprietà margin che ti darà l'opportunità di valutarne le capacità.

Per chiarezza, fornirò un esempio in cui ci sarà molto testo e vedrai quali rientri sono presenti nell'immagine. In questo esempio, utilizzeremo un'immagine senza specificare i rientri in modo che tu possa vedere chiaramente la differenza.

Nel browser vediamo quanto segue:

In questo esempio ho creato dei rientri dall'immagine grazie al parametro margin, che ci ha fornito rientri di 20 pixel su tutti e quattro i bordi. Qui puoi eseguire una manipolazione più complessa, ad esempio puoi impostare l'offset da un bordo specifico:

• margin-top – margine dal lato superiore
• margin-right – margine dal lato destro
• margin-bottom – margine dal lato inferiore
• margin-left – margine dal lato sinistro

Di conseguenza, qui puoi regolare tutto in modo più preciso o impostare il rientro solo da uno o due lati senza toccare gli altri.

Nel browser:

Impostiamo una cornice attorno all'immagine, grazie a parametro del bordo Per prima cosa impostiamo la larghezza della cornice utilizzando border-width, impostiamola in pixel, poi lo stile della cornice, cioè il suo aspetto in stile bordo, ci sono diversi valori tra cui scegliere:

E l'ultimo parametro che regoleremo è il colore del bordo, che è impostato dal parametro border-color.

Nel browser vediamo:

Come hai capito, abbiamo assegnato uno sfondo al tag body grazie al selettore di tag, poiché occupa l'intero documento, possiamo assegnarlo anche ad altri tag. Il parametro background ci ha fornito uno sfondo con l'immagine dell'indirizzo a cui scriviamo tra parentesi. Puoi anche manipolare lo sfondo, ad esempio:

sfondo: url(proba.png) ripeti-x;

Lo sfondo verrà ripetuto solo lungo l'asse X, cioè orizzontalmente su una linea.

sfondo: url(proba.png) ripetizione-y;

Lo sfondo verrà ripetuto solo lungo l'asse Y, cioè verticalmente su una riga.

sfondo: url(proba.png) nessuna ripetizione;

Lo sfondo non si ripeterà e apparirà solo un'immagine.

dimensione dello sfondo: 500px 200px;

Questo parametro aggiuntivo, che specifica la dimensione dell'immagine per lo sfondo, la larghezza e l'altezza.

Rendere un'immagine trasparente usando i CSS

Nel browser vediamo quanto segue:

Questa proprietà è arrivata con l'avvento dei CSS3 e in realtà ha ricevuto un utilizzo piuttosto ampio. Implementato utilizzando il parametro opacity, che imposta la trasparenza dell'immagine, valori da 0 a 1, e il secondo parametro filter: alpha(Opacity=50); fa la stessa cosa solo per browser Internet Explorier poiché le versioni precedenti non supportano il parametro di opacità, valori da 0 a 100. Nell'esempio ho realizzato appositamente due immagini in modo che la differenza possa essere vista chiaramente.

Questo conclude la lezione "Proprietà immagine CSS". Spero che questa lezione ti sia stata utile e ti abbia ispirato a studiare ulteriormente la lingua e acquisire nuove conoscenze.

Data di pubblicazione: 2014-04-22

Le immagini sono componenti di quasi tutti i siti Web, quindi il ridimensionamento è indispensabile. Puoi modificare la dimensione dell'immagine in 2 modi: redattore grafico o programmaticamente in codice html sui css.

Se dentro codice CSS Se non imposti la dimensione dell'immagine in html, la sua altezza e larghezza sul sito saranno le stesse in pixel del file sorgente. Cioè puoi modificare la dimensione dell'immagine senza css e html, utilizzando solo un editor grafico, e cambierà automaticamente sul sito se non ne specifichi la dimensione. Ma ci sono casi in cui è necessario modificare a livello di codice la dimensione dell'immagine in CSS in HTML.

1. Modifica dell'immagine in un editor grafico

Puoi ridimensionare l'immagine in qualsiasi editor grafico (photoshop, gimp, xnview) e cambierà automaticamente sul sito in base alle dimensioni originali.

Vantaggi del metodo:

L'immagine si carica più velocemente perché non è necessario scaricare dati aggiuntivi (pixel), che verranno poi compressi a livello di codice.

Aspetti negativi:

Gli editor grafici non comprimono male le immagini di larghezza e altezza inferiori a 200 pixel.

Quando possibile e consigliabile, prova a modificare le dimensioni in un editor grafico in modo che le immagini si carichino più velocemente che con cambio di programma. La differenza di velocità può essere decine di volte.

2. Modifica dell'immagine nel codice CSS sul sito

Professionisti:

È più veloce e più conveniente impostare la dimensione. Questo metodo La riduzione dell'immagine viene solitamente utilizzata per comodità. Ad esempio, quando un'immagine può averne molte varie dimensioni- spesso è più conveniente modificare i valori della stessa immagine in modo programmatico piuttosto che caricare tutte le opzioni di formato per un'immagine modificata in un editor grafico.

Le immagini piccole, inferiori a 200 pixel in altezza o larghezza, vengono compresse in modo efficiente, a differenza degli editor grafici. Se desideri che la dimensione dell'immagine sul sito sia inferiore a 200 pixel, è meglio che la dimensione originale sia più grande del 30-50% (260-300 pixel) per risparmiare buona qualità quando diminuisce.

Allo stesso tempo, la differenza nella velocità di caricamento del sito non si farà sentire perché le immagini piccole occupano pochissimo spazio e se ne aumenti la dimensione del 30%, non noterai alcun cambiamento. Ma noterai la differenza di qualità.

Aspetti negativi:

Le immagini compresse dal software richiedono più tempo per essere caricate perché il ridimensionamento avviene solo dopo aver scaricato la versione originale. Pertanto, se la dimensione dell'immagine è superiore a 200 pixel in larghezza o altezza, è meglio comprimerla in un editor grafico per far funzionare il sito più velocemente.

Come cambiare la dimensione dell'immagine in html usando i css

Per ridimensionare un'immagine in html significa vengono utilizzate le proprietà CSS larghezza(larghezza) e altezza(altezza) all'interno dell'attributo style. Puoi scrivere solo larghezza o altezza e il restante valore non specificato cambierà automaticamente per mantenere le proporzioni dell'immagine. Ad esempio, specificando solo la larghezza dell'immagine utilizzando larghezza, la sua altezza cambierà automaticamente, mantenendo le proporzioni. E viceversa, quando specifichi solo l'altezza, anche la sua larghezza cambierà automaticamente, mantenendo le proporzioni dell'immagine.

Codice di esempio senza specificare le dimensioni dell'immagine

Risultato nel browser

Codice della pagina

Codice di esempio per ridimensionare un'immagine in .css

Risultato nel browser

Codice della pagina

style="larghezza:150px; " >

Entrambi gli esempi mostrati sopra utilizzano la stessa immagine con una dimensione di 300x184px (larghezza e altezza). Nell'esempio 1 l'immagine veniva visualizzata nel browser invariata con la dimensione originale di 300x184px perché la larghezza e l'altezza non erano specificate nel css. E nell'esempio 2, l'immagine è stata visualizzata nel browser ridotta di 2 volte perché la larghezza era specificata a 150 px, l'altezza è stata modificata automaticamente a 92 px. Come puoi vedere, la proprietà dell'altezza non ha bisogno di essere specificata perché cambia automaticamente in proporzione alla larghezza.

Se specifichi entrambi i parametri: larghezza(larghezza), altezza(altezza) e non corrisponderanno alle proporzioni, l'immagine avrà esattamente queste dimensioni, ma in forma compressa o allungata, a seconda dei valori.

Perché non è consigliabile ingrandire le immagini

Importante: l'aumento delle dimensioni dell'immagine comporta una perdita di qualità. Quando si modifica in qualsiasi modo, è importante impostare i valori in modo inferiore rispetto all'immagine originale, cioè solo diminuire.

Se imposti una dimensione in pixel più grande dell'immagine originale, la qualità peggiorerà. E la perdita di qualità sarà chiaramente visibile, perché il computer non può aggiungere nuovi pixel, può solo aumentare la dimensione di quelli esistenti. Maggiore è l'ingrandimento dell'immagine rispetto al valore originale, peggiore è la sua qualità e più chiaramente visibili sono i pixel quadrati.

Prima di rispondere alla domanda " come inserire un'immagine in HTML?“, va notato che non vale la pena sovraccaricare le pagine web con un'enorme quantità di materiale grafico, poiché ciò non solo migliorerà la percezione visiva della risorsa da parte dell'utente, ma aumenterà anche il tempo di caricamento della pagina.

Quando si creano siti Web, i formati grafici più comunemente utilizzati sono PNG, GIF e JPEG e per il lavoro di progettazione con immagini, l'editor grafico Adobe Photoshop, che ha ricche funzionalità per comprimere e ridimensionare le immagini senza perdere la qualità, che è incredibilmente importante per lo sviluppo web .

Come inserire un'immagine in HTML?

Per inserire un'immagine in una pagina HTML, utilizza un unico semplice tag:

,

dove xxx è l'indirizzo dell'immagine. Se l'immagine si trova nella stessa directory della pagina, il tag sarà simile a:

Tuttavia, Internet stabile e ad alta velocità non ha ancora raggiunto tutti gli angoli del globo e accade che l'immagine sul sito semplicemente non venga caricata. Per questi casi esiste il concetto di testo alternativo.

Viene visualizzata al posto dell'immagine quando questa non è disponibile, durante il caricamento o nella modalità operativa del browser “senza immagini”. Viene aggiunto utilizzando l'attributo alt tag .

Esempio di aggiunta di testo alternativo a un file grafico:

Assegnazione delle dimensioni delle immagini in HTML

Per modificare le dimensioni di visualizzazione di un file grafico, utilizzare i tag altezza e larghezza, dove altezza è l'altezza e larghezza è la larghezza, misurata in pixel.

Quando si utilizzano questi attributi, il browser alloca prima lo spazio per il contenuto grafico, prepara il layout generale della pagina, visualizza il testo e quindi carica l'immagine stessa.

L'immagine viene posizionata in un rettangolo con le dimensioni specificate e, se i parametri sono più piccoli o più grandi di quelli originali, l'immagine viene allungata o compressa.

Se non vengono utilizzati gli attributi altezza e larghezza, il browser carica immediatamente l'immagine, ritardando la visualizzazione del testo e degli altri elementi della pagina.

Questi parametri possono essere specificati sia in pixel (la dimensione dell'immagine è costante e non dipende dalla risoluzione dello schermo dell'utente) sia in percentuale (la dimensione dell'immagine dipende dalla risoluzione dello schermo).

Per esempio:

Va ricordato che nel momento in cui si modifica la dimensione originale dell'immagine, è necessario mantenerne le proporzioni.

Per fare ciò è sufficiente specificare il valore di uno solo dei parametri ( larghezza o altezza), e il browser calcolerà automaticamente il valore del secondo.

Posizione dell'immagine in HTML

Come con molti tag HTML, Applica l'attributo align, che allinea l'immagine:

- l'immagine si trova sopra il testo;

- l'immagine si trova sotto il testo;

- l'immagine si trova a sinistra del testo;

- l'immagine si trova a destra del testo.

Collegamento all'immagine

Questo viene fatto come segue:

Come puoi vedere, un inserto grafico può essere un collegamento e, se cliccato, reindirizzare a qualsiasi indirizzo scritto in forma completa o abbreviata.

Come posso rendere un'immagine uno sfondo in HTML?

L'immagine può essere inserita non solo nella pagina come oggetto visibile, ma anche messa in secondo piano. Per definire un'immagine come sfondo è necessario specificare nel tag l'attributo background="xxx", dove xxx è l'indirizzo dell'immagine, specificato nello stesso modo degli esempi precedenti.

Ad esempio, impostiamo la seguente immagine texture come immagine di sfondo:

Salva l'immagine in una cartella con una pagina preparata e scrivi le seguenti righe:

Sfondo con testo.

L'immagine di sfondo della pagina è impostata.

Non sai come aumentare le dimensioni di un'immagine? Questo è un compito molto semplice poiché tutto ciò di cui hai bisogno è già installato sul tuo computer. Leggi questo tutorial e imparerai come ridimensionare una foto utilizzando 5 semplici strumenti.

Metodo 1: come ridimensionare un'immagine in Microsoft Paint

1. Trova e avvia MS Paint. Viene preinstallato su tutte le versioni del sistema operativo Finestre. Start> Tutti i programmi> Accessori> Paint:

1. Trascina l'immagine nella finestra Paint o utilizza Menù > Apri (Ctrl+O).
2. Nel menu principale del programma, trova la voce " Ridimensiona" e selezionala:

1. Si aprirà il pannello per modificare le dimensioni e le proporzioni dell'immagine. È possibile specificare il valore in pixel. Non dimenticare di controllare " Mantieni le proporzioni" Altrimenti l'immagine risulterà deformata:

1. Per aumentare le dimensioni dell'immagine, fare clic sul pulsante "OK" e salvare la foto.

Consiglio:

• Se non riesci a ridimensionare la foto senza allungarla, puoi utilizzare lo strumento Ritaglia per rimuovere i bordi indesiderati. Come farlo è descritto nel paragrafo 3;
• Per aprire una foto più velocemente, fai clic destro su di essa e seleziona " Apri con Paint»;
• È meglio salvare l'immagine nello stesso formato dell'originale.

Metodo 2. Come ridimensionare un'immagine in MS Photo Gallery

1. Se Raccolta foto Microsoft non è installata sul computer ( Start > Galleria fotografica), è necessario scaricarlo e installarlo come parte di Windows Essentials 2012;
2. Avvia MS Photo Gallery e trova il tuo file grafico;
3. Fare clic destro su di esso e selezionare "Ridimensiona...":

1. Seleziona un preset già pronto: " Piccolo 640 pixel", "Medio 1024", "Grande 1280", ecc.

1. Fare clic su " Ridimensiona e salva" Dopo aver aumentato le dimensioni dell'immagine, l'immagine verrà inserita nella stessa cartella e al suo interno rimarrà anche l'originale.

Consiglio:

• Se è necessario impostare la dimensione esatta dell'immagine, selezionare " Costume" e imposta la dimensione sul lato più grande della foto;
• Per ridimensionare più foto contemporaneamente, selezionale tenendo premuto il tasto Ctrl.

Metodo 3: come ridimensionare un'immagine in Photoscape

Puoi aumentare le dimensioni dell'immagine in Photoshop. Oppure usa Photoscape per questo.

1. Scarica Photoscape e installalo. Avvia il programma;
2. Vai alla scheda "Editor" e trova la foto che desideri modificare:

1. Nella parte inferiore dell'immagine c'è un pulsante "Ridimensiona", fai clic su di esso.
2. Imposta una nuova dimensione della foto. Assicurati che l'opzione " Mantenere le proporzioni" è abilitato e premere il pulsante "OK":

1. Salva l'immagine modificata.

Consiglio:

• Se è necessario ridimensionare più immagini, utilizzare il pulsante " Editore batch" Aggiungi una cartella e ridimensiona tutte le foto al suo interno;
• Se non conosci la dimensione esatta, puoi impostare la "Percentuale" della dimensione originale.

Metodo 4. Come ridimensionare un'immagine in IrfanView

1. Installa IrfanView: un ottimo strumento per visualizzare e ingrandire le immagini;
2. Aggiungi una foto trascinandola nella finestra del programma o facendo clic sul primo pulsante nella barra degli strumenti:

1. Vai alla scheda "Immagine", seleziona " Modificare dimensioni/proporzioni» ( CTRL+R);
2. Imposta la nuova dimensione in pixel, centimetri, pollici o come percentuale dell'immagine originale:

1. Salva l'immagine.

Consiglio:

• Puoi utilizzare dimensioni standard: 640 x 480 pixel, 800 x 600 pixel, 1024 x 768 pixel, ecc.;
• Per mantenere foto di alta qualità, assicurati che il tuo DPI sia impostato almeno su 300.

Metodo 5. Come ridimensionare un'immagine online

1. Per ridimensionare un'immagine online, vai su PicResize.
2. Fare clic sul pulsante Navigare" per selezionare una foto. Fare clic su " Continua»:

1. Seleziona una percentuale dell'immagine originale, ad esempio più piccola del 50%. Lo strumento visualizzerà la dimensione dell'immagine di output. In alternativa, puoi inserire la tua taglia esatta selezionando " Formato personalizzato»: