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.
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.
Rounded image
The border-radius property sets the radius of the bordered image. It is used to create the rounded images.
- 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.
Responsive Image
It automatically adjusts to fit on the screen size. It is used to adjust the image to the specified box automatically.
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:
Output:
Thumbnail Image
Transparent Image
Rounded Image
You can resize the browser to see the effect
Do you Know?
Progamming is what actually means ?What is software development ?
How we categorized software development in different manner.
C Plus Plus
Python
Java Development
Web Designing
Javascript
Mysql
Oracle
