le miniature delle immagini consentono di visualizzare più immagini in una piccola quantità di spazio su una pagina Web. Posizionare le immagini in miniatura sotto le descrizioni dei prodotti o semplicemente presentare una galleria di miniature che rappresentano immagini più grandi disponibili sul tuo sito. Non è necessario ridimensionare le immagini utilizzando un programma di editing di immagini. Basta creare classi CSS e assegnarli alle immagini che si desidera apparire come miniature.

istruzione

1 Avviare un programma di editing HTML o un editor di testo.

2 Incollare il codice html indicato di seguito nella sezione body del documento:

<Img class = "thumbnailByPercentage" src = "myImage.jpg" />
<Img class = "thumbnailByPixels" src = "myImage.jpg" />
<Img src = "myImage.jpg" />

Sostituire "myImage.jpg" con l'URL di un file di immagine su Internet o il nome di un file immagine si trova sul disco rigido. I primi due tag "img" fanno riferimento a due classi CSS. Quelle classi determinano le dimensioni dell'immagine.

3 Aggiungere il seguente codice CSS alla sezione stile del documento:

.thumbnailByPercentage {height: 50%; Larghezza: 50%}
.thumbnailByPixels {height: 100px; width: 100px;}

La prima classe imposta la dimensione di qualsiasi oggetto che fa riferimento ai valori percentuali indicati. La seconda classe definisce anche le dimensioni di un oggetto, ma lo fa utilizzando i valori dei pixel. L'altezza e la larghezza sono 100 pixel per 100 pixel in questo esempio.

4 Salvare il documento e visualizzarlo in un browser. Due anteprime appaiono seguiti da l'immagine originale. La prima miniatura è del 50 per cento inferiore rispetto all'immagine originale. altezza e la larghezza del secondo miniature sono 100 pixel.

Consigli e avvertenze

• Questo esempio illustra l'uso di classi CSS per fare una singola immagine apparire in modo diverso a seconda della classe CSS che si applica al tag "img". Creare classi CSS aggiuntive che definiscono altre dimensioni, se si desidera generare miniature con altre dimensioni. È quindi possibile assegnare una di queste classi a qualsiasi immagine per farla apparire come una miniatura di dimensioni che corrispondono a quelle definite nella classe associata.
• Se si utilizza la classe ".thumbnailByPixels", assicurarsi di impostare le dimensioni dei pixel per l'altezza e la larghezza in modo proporzionale. Per esempio, se l'altezza originale di un'immagine è 400px e la sua larghezza è 600px, dividere i due numeri per lo stesso fattore - come ad esempio 5 - per ottenere 80px e 150 pixel per le dimensioni della miniatura. Ciò assicura che l'immagine non è distorta quando visualizzato. Quando si utilizza la classe ".thumbnailByPercentage", applicare lo stesso valore percentuale di altezza e larghezza come illustrato in questo esempio.