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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...