CSS Images
Images in CSS: Images are a critical part of a web application. It includes various types of images in the web application that cannot be recommended. However, it is essential to use any image when needed. CSS helps to control an image’s display in web applications.
The image styling is very similar to an element styling with the help of the margins and borders. Here are several CSS properties like width property, height, and border property that will help us in styling an image.
Supported browsers: There are some of the critical browsers that are supported by the various styling images, which are listed as follows:
- Internet Explorer
- Google chrome
- Opera
- Firefox
- Safari
There are some of the illustrations which are going to help to understand this image property.
Thumbnail Image
The thumbnail images can be created or designed by using the border CSS property. Let’s take an example below:
Example:
<!DOCTYPE html>
<html>
<head>
<style>
img
{
border: 2px solid purple;
border-radius: 5px;
padding: 10px;
}
h1
{
color: purple;
}
</style>
</head>
<body>
<h1> Thumbnail Images </h1>
<img src= "flower3.png"></img>
<h1> "Earth laughs in flowers.” </h1>
</body>
</html>
Output:
Transparent Image
A transparent image can be created using the opacity CSS property. The opacity property value is ranges from 0.0-1.0, respectively. Let’s consider the below example:
Example:
<!DOCTYPE html>
<html>
<head>
<style>
img
{
border: 2px solid purple;
border-radius: 5px;
padding: 10px;
opacity: 0.4;
}
h1
{
color: purple;
}
</style>
</head>
<body>
<h1> Transparent Image Illustration </h1>
<img src= "flower3.png"></img>
<h1> "Earth laughs in flowers." </h1>
</body>
</html>
Output:
Rounded Image
The rounded images are created using a border-radius property as it can set-up the radius of an image. Some of the possible and essential values for setting the rounded images are as follows:
Values Descriptionborder-radiusIt allows every four properties of border-radius.border-top-right-radiusIt can be set-up the top-right border’s corners.border-top-left-radiusA top-left border’s corner can be addressed by using this property.border-bottom-right-radiusIt set-up a bottom-right border’s corner.border-top-right-radiusIt addresses a bottom-left border’s corner.Example:
<!DOCTYPE html>
<html>
<head>
<style>
.img1
{
border: 2px solid purple;
border-radius: 10px;
padding: 7px;
}
.img2
{
border: 2px solid purple;
border-radius: 50%;
padding: 7px;
}
h3
{
color: purple;
}
</style>
</head>
<body>
<h3> Rounded Image Illustration </h3>
<img src= "flower3.png" class= "img1"></img>
<h3> "Earth laughs in flowers." </h3>
<h3> Circle Image Illustration </h3>
<img src= "flower3.png" class= "img2"></img>
<h3> "Earth laughs in flowers." </h3>
</body>
</html>
Output:
Responsive Image
The responsive images are able to fit over the size of the screen automatically. It can be applied to adjust an image to a specified box.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.img
{
max-width: 100%;
height: auto;
}
h3
{
color: purple;
}
</style>
</head>
<body>
<h3> Responsive image Illustration </h3>
<h3> We can change the size of the browser to feel the effect </h3>
<img src="flower3.png" class="img" width="1000" height="300"></img>
<h3> "Earth laughs in flowers." </h3>
</body>
</html>
Output:
Center an Image
The center an image value can be applied to by the use of the right-margin and left-margin properties. If we wish to design the block element, we can apply these kinds of properties in an auto mode.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.img
{
margin-left: auto;
margin-right: auto;
display: block;
}
h1,h2
{
text-align: center;
}
</style>
</head>
<body>
<h1> Center an Image </h1>
<img src= "flower3.png" class= "img"></img>
<h2> "Earth laughs in flowers." </h2>
</body>
</html>
Output: