How to Make Thumbnail Images in CSS
Image thumbnails allow you to display multiple images in a small amount of space on a Web page. Place thumbnail images beneath product descriptions or simply present a gallery of thumbnails that represent larger images available on your site. You don't have to resize images using an image editing program. Simply create CSS classes and assign them to the images you would like to appear as thumbnails.
Other People Are Reading
Instructions
-
-
1
Launch an HTML editing program or a text editor.
-
2
Paste the HTML code shown below into your document's body section:
<img class="thumbnailByPercentage" src="myImage.jpg" />
<img class="thumbnailByPixels" src="myImage.jpg" />
<img src="myImage.jpg" />Replace "myImage.jpg" with the URL of an image file on the Internet or the name of an image file located on your hard drive. The first two "img" tags reference two CSS classes. Those classes determine the image's size.
-
-
3
Add the following CSS code to your document's style section:
.thumbnailByPercentage {height:50%; width:50%}
.thumbnailByPixels {height:100px; width:100px;}The first class sets the size of any object that references it to the percentage values shown. The second class also sets an object's size, but it does that using pixel values. The height and width are 100 pixels by 100 pixels in this example.
-
4
Save your document and view it in a browser. Two thumbnails appear followed by your original image. The first thumbnail is 50 percent smaller than the original image. The second thumbnail's height and width are 100 pixels.
-
1
Tips & Warnings
This example illustrates the use of CSS classes to make a single image appear differently depending on the CSS class that you apply to the "img" tag. Create additional CSS classes that define other sizes if you wish to generate thumbnails with other dimensions. You can then assign one of those classes to any image to make it appear as a thumbnail with dimensions that match the ones defined in the associated class.
If you use the ".thumbnailByPixels" class, be sure to set the pixel sizes for the height and width proportionally. For instance, if an image's original height is 400px and its width is 600px, divide both numbers by the same factor -- such as 5 -- to get 80px and 150px for the thumbnail’s dimensions. This insures that the image does not appear distorted when displayed. When using the ".thumbnailByPercentage" class, apply the same percentage value to height and width as shown in this example.
