Come fare immagini di anteprima in CSS

May 12

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.

Articoli Correlati