Skip to content
Related Articles
Open in App
Not now

Related Articles

Pure CSS Images

Improve Article
Save Article
  • Last Updated : 27 Sep, 2021
Improve Article
Save Article

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
Related Articles

Start Your Coding Journey Now!