Hvordan lage Miniatyrbilder i CSS

Miniatyrbilder lar deg vise flere bilder i en liten mengde plass på en webside. Plasser miniatyrbilder under produktbeskrivelser eller bare presentere et galleri av miniatyrbilder som representerer større bilder tilgjengelig på nettstedet ditt. Du trenger ikke å endre størrelsen på bilder ved hjelp av et bilderedigeringsprogram. Bare lage CSS-klasser og tilordne dem til de bildene du ønsker å fremstå som miniatyrbilder.

Bruksanvisning

1 Starte et HTML-redigering program eller en tekst editor.

2 Lim inn HTML-koden nedenfor til dokumentets hoveddel:

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

Erstatt "myImage.jpg" med nettadressen til en bildefil på Internett eller navnet på en bildefil som ligger på harddisken. De første to "img" tags referere to CSS klasser. Disse klassene avgjør bildets størrelse.

3 Legg til følgende CSS-kode i dokumentet stil seksjon:

.thumbnailByPercentage {høyde: 50%; width: 50%}
.thumbnailByPixels {height: 100px; width: 100px;}

Den første klassen angir størrelsen på et objekt som refererer det til prosentverdier som vises. Den andre klassen stiller også størrelsen på objektet, men det gjør at det å bruke pikselverdier. Høyden og bredden er 100 piksler med 100 piksler i dette eksemplet.

4 Lagre dokumentet og vise den i en nettleser. To miniatyrer vises etterfulgt av det opprinnelige bildet. Den første miniatyr er 50 prosent mindre enn det opprinnelige bildet. Den andre miniatyr høyde og bredde er 100 piksler.

Hint

• Dette eksemplet illustrerer bruken av CSS-klasser for å lage et enkelt bilde vises forskjellig avhengig av CSS-klasse som du bruker til "img" tag. Opprett flere CSS-klasser som definerer andre størrelser hvis du ønsker å generere miniatyrer med andre dimensjoner. Du kan deretter tildele en av disse klassene til et bilde for å gjøre det synes som et miniatyrbilde med dimensjoner som samsvarer med dem som er definert i den tilhørende klassen.
• Hvis du bruker ".thumbnailByPixels" klassen, må du huske å sette pixel størrelser for høyde og bredde proporsjonalt. For eksempel, hvis et bilde opprinnelige høyde er 400 piksler og bredden er 600px, dele begge tallene med samme faktor - for eksempel 5 - for å få 80px og 150px for miniatyr dimensjoner. Dette sikrer at bildet ikke forvrengt når den vises. Ved bruk av ".thumbnailByPercentage" klasse, gjelder det samme prosentvise verdien til høyde og bredde som vist i dette eksemplet.