CSS Images

Images in CSS

CSS Images : Images plays an important role in any webpage. Though it is not recommended to include a lot of images, but it is still important to use good images wherever required.

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 image in CSS:

Thumbnail CSS Images:

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 AskAtul</h2>
</body> 
</html>

Transparent CSS Images:

To make an image transparent, we have to use the <strong>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 Askatul</h2>
</body>
</html>

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:

i. border-radius
ii. border-top-right-radius
iii. border-top-left-radius
iv. border-bottom-right-radius
v. border-bottom-left-radius

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 AskAtul</h2>

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

Responsive CSS Images:

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 AskAtul</h2>
</body> 
</html>

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="ask.png" id="img1"></img>
<h2>Welcome to AskAtul</h2>
</body> 
</html>

Recommended Posts:

Spread the love

Leave a Comment

Your email address will not be published. Required fields are marked *