Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

Pure CSS Images

  • Last Updated : 27 Sep, 2021

Pure CSS is a framework of CSS. It is a free and open-source tool collection for creating responsive websites and web applications. Pure CSS is developed by Yahoo and is used for creating faster, beautiful, and responsive websites. It can be used as an alternative to Bootstrap.

Pure CSS provides class pure-img that makes the image responsive. This class can be applied to the <img> element to make it scale with the viewport. This is handy when building responsive websites.

Syntax:

<img class="pure-img" src="image_source" />

Example: In this example, we are using .pure-img class for creating a responsive image page. 

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>PureCSS</title>
    <meta charset="utf-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
        integrity=
"sha384-LTIDeidl25h2dPxrB2Ekgc9c7sEC3CWGM6HeFmuDNUjX76Ert4Z4IY714dhZHPLd"
        crossorigin="anonymous">
</head>
  
<body>
    <center>
        <div style="width: 500px;background-color: yellow;">
  
            <h1 style="color:green;">
                GeeksforGeeks
            </h1>
  
            <h2>Responsive Image</h2>
  
            <img class="pure-img" src=
        </div>
    </center>
</body>
  
</html>

 



Output:

Output

Rounded Corners Image: The border-radius property of CSS is used to create a rounded corner image.

Example:

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>PureCSS</title>
    <meta charset="utf-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
        integrity=
"sha384-LTIDeidl25h2dPxrB2Ekgc9c7sEC3CWGM6HeFmuDNUjX76Ert4Z4IY714dhZHPLd"
        crossorigin="anonymous">
</head>
  
<body>
    <center>
        <div style="width: 500px;
            background-color: yellow;">
  
            <h1 style="color:green;">
                GeeksforGeeks
            </h1>
  
            <h2>Responsive Image</h2>
  
            <img class="pure-img" src=
            style="border-radius: 50px;" />
        </div>
    </center>
</body>
  
</html>

Output:

Output

Circle Image: The border-radius property as 50% is used to create the circle shape image. 

Example:

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>PureCSS</title>
    <meta charset="utf-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
        integrity=
"sha384-LTIDeidl25h2dPxrB2Ekgc9c7sEC3CWGM6HeFmuDNUjX76Ert4Z4IY714dhZHPLd"
        crossorigin="anonymous">
</head>
  
<body>
    <center>
        <div style="width: 500px;
            background-color: yellow;">
  
            <h1 style="color:green;">
                GeeksforGeeks
            </h1>
  
            <h2>Responsive Image</h2>
  
            <img class="pure-img" src=
            style="border-radius: 50%;" />
        </div>
    </center>
</body>
  
</html>

Output:

Output




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!