/    /  CSS Images

CSS Images

 

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

 

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="good-morning.jpg"></img>
<h2>Welcome to I2 tutorials</h2>
</body>
</html>

 

OUTPUT:

 

CSS Images

 

Transparent image:

 

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="good-morning.jpg"></img>
<h2>Welcome to I2 tutorials</h2>
</body>
</html>

 

OUTPUT:

 

CSS Images

 

Rounded image:

 

The possible values for the rounded corners :

  • border-radius
  • border-top-right-radius
  • border-top-left-radius
  • border-bottom-right-radius
  • border-bottom-left-radius

 

Example:

 

<!DOCTYPE html>
<html>
<head>
  <style>

#img{
border: 2px solid green;
border-radius:50%;
padding:5px;
}

h2{
color:red;
}
  </style>
</head>

<body>


<h1>Circle Image</h1>
<img src="good-morning.jpg" id="img"></img>
<h2>Welcome to I2 tutorials</h2>
</body>
</html>

 

OUTPUT:

 

CSS Images

 

Responsive Image:

 

Example:

 

<!DOCTYPE html>
<html>
<head>
  <style>
#img1{
max-width:100%;
height:auto;
}
h2{
color:red;
}
  </style>
</head>

<body>
<h1>Responsive image</h1>
<img src="good-morning.jpg" id="img1" width="1000" height="300"></img>
</body>
</html>

 

OUTPUT:

 

CSS Images

 

Center an Image:

 

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="good-morning.jpg" id="img1"></img>
<h2>Welcome to I2 tutorials</h2>
</body>
</html>

 

OUTPUT:

 

CSS Images