Skip to content
Related Articles

Related Articles

Improve Article

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>
  
    <!-- Adding W3.CSS file through external link -->
    <link rel="stylesheet" 
          href="https://www.w3schools.com/w3css/4/w3.css">
</head>
  
<body>
    <!-- w3-container is used to add 16px
         padding to any HTML element.  -->
    <!-- w3-center is used to set the content
         of the element to the center. -->
    <div class="w3-container w3-center">
  
        <!-- w3-text-green sets the text color
             to green. -->
        <!-- w3-xxlarge sets font size to 32px. -->
        <h2 class="w3-text-green w3-xxlarge">
            Welcome To GFG
        </h2>
    </div>
      
    <!-- Adding a responsive image at the 
         center of the page -->
    <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>
  
    <!-- Adding W3.CSS file through external link -->
    <link rel="stylesheet" 
          href="https://www.w3schools.com/w3css/4/w3.css">
</head>
  
<body>
    <!-- w3-container is used to add 16px
         padding to any HTML element.  -->
    <!-- w3-center is used to set the content
         of the element to the center. -->
    <div class="w3-container w3-center">
  
        <!-- w3-text-green sets the text color to green. -->
        <!-- w3-xxlarge sets font size to 32px. -->
        <h2 class="w3-text-green w3-xxlarge">
          Welcome To GFG
      </h2>
    </div>
      
    <!-- Adding a round-edged responsive image at 
         the center of the page -->
    <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>
  
    <!-- Adding W3.CSS file through external link -->
    <link rel="stylesheet" 
          href="https://www.w3schools.com/w3css/4/w3.css">
</head>
  
<body>
    <!-- w3-container is used to add 16px 
         padding to any HTML element.  -->
    <!-- w3-center is used to set the content
         of the element to the center. -->
    <div class="w3-container w3-center">
  
        <!-- w3-text-green sets the text color to green -->
        <!-- w3-xxlarge sets font size to 32px. -->
        <h2 class="w3-text-green w3-xxlarge">
          Welcome To GFG
      </h2>
    </div>
      
    <!-- Adding a circular responsive image at 
         the center of the page -->
    <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>
  
    <!-- Adding W3.CSS file through external link -->
    <link rel="stylesheet" 
          href="https://www.w3schools.com/w3css/4/w3.css">
</head>
  
<body>
    <!-- w3-container is used to add 16px 
         padding to any HTML element.  -->
    <!-- w3-center is used to set the content
         of the element to the center. -->
    <div class="w3-container w3-center">
  
        <!-- w3-text-green sets the text color to green. -->
        <!-- w3-xxlarge sets font size to 32px. -->
        <h2 class="w3-text-green w3-xxlarge">
            Welcome To GFG
        </h2>
    </div>
      
    <!-- Adding a bordered responsive image at 
         the center of the page -->
    <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>
  
    <!-- Adding W3.CSS file through external link -->
    <link rel="stylesheet" 
          href="https://www.w3schools.com/w3css/4/w3.css">
        
</head>
  
<body>
    <!-- w3-container is used to add 16px 
         padding to any HTML element.  -->
    <!-- w3-center is used to set the content 
         of the element to the center. -->
    <div class="w3-container w3-center">
  
        <!-- w3-text-green sets the text color to green. -->
        <!-- w3-xxlarge sets font size to 32px. -->
        <h2 class="w3-text-green w3-xxlarge">
          Welcome To GFG</h2>
    </div>
      
    <!-- Adding a card like responsive image at
         the center of the page -->
    <div class="w3-container w3-center">
        <img class="w3-image w3-card-4" src="gfg.png">
    </div>
</body>
</html>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :