Creating Image Thumbnail Using CSS

Creating Image Thumbnail Using CSS. In this Article we you step into on how to turn our image into thumbnails

In order to this, there are a few steps we will need to do

Create a Border radius ” Optional “

Set image with a fixed width
Set your image with borders
Provide your image padding, this will extend your border slightly out.

By following the steps below we will be able to create a thumbnail in our web page.

The Command involved to make this happen are:

border-radius

width , height
borders
Padding

Refer the Code Below

HTML

<!DOCTYPE html>
<html>
    
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>GETTING STARTED WITH BRACKETS</title>
        <meta name="description" content="Just another Website.">
        <link rel="stylesheet" href="main.css">
        <link href="https://fonts.googleapis.com/css?family=Arvo|Indie+Flower|Ranchers" rel="stylesheet">
    </head>
    <body>
     
      <div class="container">
          <img src="images.jpg " class="borderImage">        
        
     </div>        
        
    </body>
</html>

CSS


.borderImage{
  border-radius: 10px;
  width: 300px;
  height: 300px;
  border : 3px solid #ddde;
  padding : 20 ;
  
}

Output

Check out HTML School, this site is free and very helpful for web developer like us.

Check out How to create rounded corner using CSS here

Creating Image Thumbnail Using CSS

Refer the Code Below

Leave a Comment Cancel reply