{"id":70708,"date":"2023-06-26T17:54:06","date_gmt":"2023-06-26T16:54:06","guid":{"rendered":"https:\/\/kinsta.com\/it\/?p=70708&preview=true&preview_id=70708"},"modified":"2023-06-30T09:57:52","modified_gmt":"2023-06-30T08:57:52","slug":"styling-immagini-css","status":"publish","type":"post","link":"https:\/\/kinsta.com\/it\/blog\/styling-immagini-css\/","title":{"rendered":"Stile delle Immagini con i CSS: Migliorare l’Aspetto con lo Styling"},"content":{"rendered":"

Quando si parla di web design<\/a>, una grafica accattivante pu\u00f2 fare la differenza. Le immagini giocano un ruolo fondamentale nel creare un’esperienza utente coinvolgente e memorabile.<\/p>\n

Ma come si fa a trasformare le immagini da ordinarie a straordinarie? \u00c8 qui che entra in gioco lo styling delle immagini. Con la potenza dei CSS<\/a> a portata di mano, potrete liberare la vostra creativit\u00e0 e trasformare le immagini in elementi visivi accattivanti che lasciano un’impressione duratura.<\/p>\n

In questo articolo ci immergeremo nel mondo dello stile delle immagini CSS, esplorando molte tecniche e propriet\u00e0 che porteranno le vostre capacit\u00e0 di web design a nuovi livelli.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Come aggiungere immagini in HTML<\/h2>\n

Prima di poter modellare un’immagine, \u00e8 necessario aggiungerla al proprio documento HTML<\/a>. Per farlo, potete utilizzare il tag <img><\/code>. Il tag <img><\/code> \u00e8 un tag auto-chiudente (non richiede un tag di chiusura). Ha un attributo src<\/code> che specifica l’URL<\/a> o il percorso del file dell’immagine che volete visualizzare.<\/p>\n

<img src=\"image.jpg\" alt=\"Description of the image\"><\/code><\/pre>\n
Potete anche fornire un URL assoluto o un percorso di file relativo all’immagine.<\/p>\n
<img src=\"https:\/\/source.unsplash.com\/tMHAmxLyzvA\" alt=\"Boston city skyline\"><\/code><\/pre>\n
L’attributo alt<\/code> indica un testo alternativo ed \u00e8 essenziale per l’accessibilit\u00e0. Il tag <img><\/code> prevede anche due attributi opzionali: width<\/code> e height<\/code>. Questi attributi permettono di specificare le dimensioni dell’immagine in pixel.<\/p>\n
<img src=\"image.jpg\" alt=\"Description of the image\" width=\"300\" height=\"200\"><\/code><\/pre>\n
Tuttavia, in genere si consiglia di evitare di utilizzare gli attributi width<\/code> e height<\/code> a meno che non sia necessario mantenere dimensioni specifiche dell’immagine. Al contrario, si possono utilizzare i CSS per controllare le dimensioni dell’immagine, ottenendo una maggiore flessibilit\u00e0 nel design reattivo<\/a>.<\/p>\n
img {\n  height: 200px;\n  width: 700px;\n}<\/code><\/pre>\n
Responsive Image Styling<\/h2>\n
L’applicazione di valori specifici per gli attributi width<\/code> e height<\/code> a un’immagine pu\u00f2 portare a conseguenze indesiderate, come la compressione o la distorsione dell’immagine. Questo \u00e8 particolarmente vero se le dimensioni specificate non corrispondono al rapporto d’aspetto originale dell’immagine.<\/p>\n
\"Immagine
Immagine compressa.<\/figcaption><\/figure>\n
Per evitare questi problemi e mantenere le giuste proporzioni dell’immagine, entra in gioco il responsive image styling, o stile reattivo dell’immagine. Il responsive image styling assicura che le immagini si adattino alle diverse dimensioni dello schermo, il che \u00e8 fondamentale per il web design<\/a> reattivo.<\/p>\n
Potete ottenere questo risultato utilizzando la propriet\u00e0 max-width<\/code>, che limita la larghezza massima di un’immagine.<\/p>\n
img {\n  max-width: 100%;\n  height: auto;\n}<\/code><\/pre>\n
\"Immagine
Immagine reattiva.<\/figcaption><\/figure>\n