CSS Images

Images are an important part of any web application. Including a lot of images in a web application is generally not recommended, but it is important to use the images wherever they required. CSS helps us to control the display of images in web applications.

The styling of an image in CSS is similar to the styling of an element by using the borders and margins. There are multiple CSS properties such as border property, height property, width property, etc. that helps us to style an image.

Let's discuss the styling of images in CSS by using some illustrations.

Thumbnail Image

The border property is used to make a thumbnail image.

Example

 <!DOCTYPE html> 
<html> 
<head> 
    <style> 
img{
border: 2px solid red;
border-radius:5px;
padding:10px;
}
h2{
color:red;
}
    </style> 
</head> 
  
<body>
 <h1>Thumbnail Image</h1>
<img src="jtp.png"></img>
<h2>Welcome to javaTpoint</h2>
</body> 
</html>

Test it Now

Transparent image

To make an image transparent, we have to use the opacity property. The value of this property lies between 0.0 to 1.0, respectively.

Example

 <!DOCTYPE html> 
<html> 
<head> 
    <style> 
img{
border: 2px solid red;
border-radius:5px;
padding:10px;
opacity:0.3;
}
h2{
color:red;
}
    </style> 
</head> 
  
<body>
 <h1>Transparent Image</h1>
<img src="jtp.png"></img>
<h2>Welcome to javaTpoint</h2>
</body>
</html>

Test it Now

Rounded image

The border-radius property sets the radius of the bordered image. It is used to create the rounded images. The possible values for the rounded corners are given as follows:

border-radius: It sets all of the four border-radius property.
border-top-right-radius: It sets the border of the top-right corner.
border-top-left-radius: It sets the border of the top-left corner.
border-bottom-right-radius: It sets the border of the bottom-right corner.
border-bottom-left-radius: It sets the border of the bottom-left corner.

Example

 <!DOCTYPE html> 
<html> 
<head> 
    <style> 
#img1{
border: 2px solid green;
border-radius:10px;
padding:5px;
}
#img2{
border: 2px solid green;
border-radius:50%;
padding:5px;
}

h2{
color:red;
}
    </style> 
</head> 
  
<body>
 <h1>Rounded Image</h1>
<img src="jtp.png" id="img1"></img>
<h2>Welcome to javaTpoint</h2>

 <h1>Circle Image</h1>
<img src="jtp.png" id="img2"></img>
<h2>Welcome to javaTpoint</h2>
</body> 
</html>

Test it Now

Responsive Image

It automatically adjusts to fit on the screen size. It is used to adjust the image to the specified box automatically.

Example

<!DOCTYPE html> 
<html> 
<head> 
    <style> 
#img1{
max-width:100%;
height:auto;
}
h2{
color:red;
}
    </style> 
</head> 
  
<body>
 <h1>Responsive image</h1>
 <h2>You can resize the browser to see the effect</h2>
<img src="jtp.png" id="img1" width="1000" height="300"></img>
<h2>Welcome to javaTpoint</h2>
</body> 
</html>

Test it Now

Center an Image

We can center an image by using the left-margin and right-margin property. We have to set these properties to auto in order to make a block element.

Example

<!DOCTYPE html> 
<html> 
<head> 
    <style> 
#img1{
margin-left:auto;
margin-right:auto;
display:block;
}
h1,h2{
text-align:center;
}
    </style> 
</head> 
  
<body>
 <h1>Center image</h1>
<img src="jtp.png" id="img1"></img>
<h2>Welcome to javaTpoint</h2>
</body> 
</html>

Test it Now

Next TopicCSS Overflow

← prev next →