CSS Thumbnail Images

Please Share On:

Definition:

CSS thumbnail images are mostly used in small screen devices. You can change your images into thumbnail images size by using the width and height of the images.

The mostly used thumbnail width and height sizes are 150 x 150 px. You can use your own thumbnail height and width values.

Syntax:

img {
  width: 150px;
  height: 150px;
}

Source Code:

<!DOCTYPE html>
<html>
  <head>
    <style>
      img {
        width: 150px;
        height: 150px;
      }
    </style>
  </head>
  <body>
    <h2>Rounded Images</h2>
    <img src="https://www.elsebazaar.com/blog/wp-content/uploads/2020/11/Sunset-Harbour-Bridge-View.jpg" alt="Sunset Harbour Bridge" width="300" height="300">
  </body>
</html>

Output

Click “TRY IT YOURSELF” to see the results.

Try it yourself

Thumbnail Image With Border Value

To give your thumbnail image a better look, use a border and padding property value. See an example below of using border and padding property value in thumbnail image.

Syntax:

img {
        border: 1px solid #a9a9a9;
        padding: 5px;
        width: 150px;
        height: 150px;
      }

Source Code:

<!DOCTYPE html>
<html>
  <head>
    <style>
      img {
        border: 1px solid #a9a9a9;
        padding: 5px;
        width: 150px;
        height: 150px;
      }
    </style>
  </head>
  <body>
    <h2>Thumbnail Images</h2>
    <img src="https://www.elsebazaar.com/blog/wp-content/uploads/2020/11/Sunset-Harbour-Bridge-View.jpg" alt="Sunset Harbour Bridge" width="300" height="300">
  </body>
</html>

Output:

Click “TRY IT YOURSELF” to see the results.

try it yourself

Donate to support writers.

You may be interested in the following topics:

Post Views: 524

CSS Thumbnail Images

Definition:

Syntax:

Source Code:

Output

Thumbnail Image With Border Value

Syntax:

Source Code:

Output:

Leave a Reply Cancel reply

Copyright @2023. All Right Reserved.