W3.CSS Images
Last Updated :
02 Mar, 2021
W3.CSS offers a single class for managing images and making them responsive. Making an image responsive means it should scale according to its parent element. That is, the size of the image should not overflow its parent and will grow and shrink according to the change in the size of its parent without losing its aspect ratio and w3-image does the same.
Example: Adding a responsive image to the HTML page.
HTML
<!DOCTYPE html>
< html >
< head >
< link rel = "stylesheet"
</ head >
< body >
< div class = "w3-container w3-center" >
< h2 class = "w3-text-green w3-xxlarge" >
Welcome To GFG
</ h2 >
</ div >
< div class = "w3-container w3-center" >
< img class = "w3-image" src = "gfg.png" >
</ div >
</ body >
</ html >
|
Output:
Although it has only class, it can be incorporated with other classes to make various effects like round-edged image, bordered image, image as a card, etc. To add a round-edged image you can use w3-round or any other similar class.
Example: Adding a round-edged image on the HTML page.
HTML
<!DOCTYPE html>
< html >
< head >
< link rel = "stylesheet"
</ head >
< body >
< div class = "w3-container w3-center" >
< h2 class = "w3-text-green w3-xxlarge" >
Welcome To GFG
</ h2 >
</ div >
< div class = "w3-container w3-center" >
< img class = "w3-image w3-round-large" src = "gfg.png" >
</ div >
</ body >
</ html >
|
Output:
You can also add a circular image by using w3-circle class to the image.
Example:
HTML
<!DOCTYPE html>
< html >
< head >
< link rel = "stylesheet"
</ head >
< body >
< div class = "w3-container w3-center" >
< h2 class = "w3-text-green w3-xxlarge" >
Welcome To GFG
</ h2 >
</ div >
< div class = "w3-container w3-center" >
< img class = "w3-image w3-circle" src = "gfg.png" >
</ div >
</ body >
</ html >
|
Output:
To add a bordered image we can use w3-border class. This effect also gives a thumbnail look to the image.
Example:
HTML
<!DOCTYPE html>
< html >
< head >
< link rel = "stylesheet"
</ head >
< body >
< div class = "w3-container w3-center" >
< h2 class = "w3-text-green w3-xxlarge" >
Welcome To GFG
</ h2 >
</ div >
< div class = "w3-container w3-center" >
< img class="w3-image w3-border
w3-padding" src = "gfg.png" >
</ div >
</ body >
</ html >
|
Output:
You can also use images as cards by using a w3-card class on the images.
Example:
HTML
<!DOCTYPE html>
< html >
< head >
< link rel = "stylesheet"
</ head >
< body >
< div class = "w3-container w3-center" >
< h2 class = "w3-text-green w3-xxlarge" >
Welcome To GFG</ h2 >
</ div >
< div class = "w3-container w3-center" >
< img class = "w3-image w3-card-4" src = "gfg.png" >
</ div >
</ body >
</ html >
|
Output:
Share your thoughts in the comments
Please Login to comment...