CSS Styling Images - GeeksforGeeks

11 Oct, 2021
Styling images in CSS works exactly the same way as styling any element using the Box Model of padding, borders, and margins for the content. There are many ways to set style in images which are listed below:
Thumbnail images
Rounded images
Responsive Images
Transparent Image
Center an Image
We will discuss all the ways for styling the image sequentially & will also understand them through the examples.
Thumbnail images: The border property is used to create thumbnail images.
Example: This example illustrates the use of the Styling image property for creating the thumbnail images.
HTML
<!DOCTYPE html><html><head>    <title>Thumbnail image</title>    <style>    img {        border: 1px solid black;        border-radius: 5px;        padding: 5px;    }    </style></head> <body>  <img src="https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png"       alt="thumbnail-image"       style="width:400px"></body></html>
Output:
Border-radius Property: The border-radius property is used to set the radius of border-image. This property can contain one, two, three, or four values. It is the combination of four properties: border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius. 
Example: This example illustrates the use of the Styling image property for creating rounded images.
HTML
<!DOCTYPE html><html><head>    <style>    img {        border-radius: 50%;    }    </style></head> <body>    <img src="https://media.geeksforgeeks.org/wp-content/uploads/forkandgeeksclassesV-min.png"         alt="rounded-image"         width="400"         height="400"></body></html>
Output:
Responsive Images: The responsive image is used to adjust the image automatically to the specified box.
Example: This example illustrates the use of the Styling image property for creating responsive images.
HTML
<!DOCTYPE html><html><head>    <style>    img {        max-width: 100%;        height: auto;    }    </style></head> <body>    <img src="https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png"         alt="Responsive-image"         width="1000"         height="300"></body></html>
Output:
Transparent Image: The opacity property is used to set the image transparent. The opacity value lies between 0.0 to 1.0.
Example: This example illustrates the use of the Styling image property for creating transparent images.
HTML
<!DOCTYPE html><html><head>    <title>style image</title>    <style>    img {        opacity: 0.5;    }    </style></head> <body>    <img src="https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png"         alt="Transparent-image"         width="100%"></body></html>
Output: 
Center an Image: The images can be centered to box by using left-margin and right-margin properties.
Example: This example illustrates the use of the Styling image property for positioning the image to the center.
HTML
<!DOCTYPE html><html><head>    <title>style image</title>    <style>    img {        display: block;        margin-left: auto;        margin-right: auto;    }    </style></head> <body> <img src="https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png"      alt="centered-image"      style="width:50%"></body></html>
Output:
Supported Browsers: The browsers supported by Styling Images are listed below: 
Google Chrome
Internet Explorer
Microsoft Edge
Firefox
Opera
Safari
nidhi_biet
bhaskargeeksforgeeks
CSS-Properties
Picked
Technical Scripter 2018
CSS
Technical Scripter
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to update Node.js and NPM to next version ?
How to create footer to stay at the bottom of a Web page?
How to apply style to parent if it has child with CSS?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?