CSS Images
Images play a crucial role in web applications, but while they enhance
visual appeal, using too many can negatively impact performance. Therefore,
it’s essential to incorporate images thoughtfully, only where necessary. CSS
provides powerful tools to manage and style images effectively within web
applications.
The process of styling an image in CSS is comparable to styling other
elements, as it involves properties like borders, margins, and more. A
variety of CSS properties, such as border, height, and width, allow for
flexible and creative image styling.
Let’s explore how to style images in CSS with some practical examples and
demonstrations.
Thumbnail Image
The border property is used to create a frame around a thumbnail
image.
Example
<!DOCTYPE
html>
<html>
<head>
<style>
img {
border:
2px solid red;
border-radius:
5px;
padding:
10px;
}
h2 {
color:
red;
}
</style>
</head>
<body>
<h1>Thumbnail Image</h1>
<img src="img.png" alt="Thumbnail
Image">
<h2>Welcome to
Gocourse</h2>
</body>
</html>
Transparent Image
To make an image transparent, the opacity property is used. The value of
this property ranges from 0.0 (completely transparent) to 1.0 (completely
opaque).
Example
<!DOCTYPE
html>
<html>
<head>
<style>
img {
border:
2px solid red;
border-radius:
5px;
padding:
10px;
opacity:
0.3;
}
h2 {
color:
red;
}
</style>
</head>
<body>
<h1>Transparent Image</h1>
<img src="img.png" alt="Transparent
Image">
<h2>Welcome to
Gocourse</h2>
</body>
</html>
Rouneded Image
The border-radius property defines the radius of an image's borders,
allowing you to create rounded corners. Here are the different ways to apply
it:
- border-radius: Sets the radius for all four corners of the image.
- border-top-right-radius: Controls the radius of the top-right corner.
- border-top-left-radius: Controls the radius of the top-left corner.
- border-bottom-right-radius: Controls the radius of the bottom-right corner.
- border-bottom-left-radius: Controls the radius of the bottom-left corner.
Example
<!DOCTYPE
html>
<html>
<head>
<style>
#img1 {
border:
2px solid green;
border-radius:
10px;
padding:
5px;
}
#img2 {
border:
2px solid green;
border-radius:
50%;
padding:
5px;
}
h2 {
color:
red;
}
</style>
</head>
<body>
<h1>Rounded Image</h1>
<img src="img.png" id="img1"
alt="Rounded Image">
<h2>Welcome to
Gocourse</h2>
<h1>Circle Image</h1>
<img src="img.png" id="img2"
alt="Circular Image">
<h2>Welcome to
Gocourse</h2>
</body>
</html>
Responsive Image
It automatically resizes to fit the screen. This property is used to adjust
the image to fit within a specified container or box.
Example
<!DOCTYPE
html>
<html>
<head>
<style>
#img1 {
max-width:
100%;
height:
auto;
}
h2 {
color:
red;
}
</style>
</head>
<body>
<h1>Responsive Image</h1>
<h2>Resize the browser window to
see the effect</h2>
<img src="img.png" id="img1"
alt="Responsive Image" width="1000" height="300">
<h2>Welcome to
Gocourse</h2>
</body>
</html>
Center an Image
To center an image, we can use the left-margin and right-margin properties.
By setting both of these properties to auto, the image becomes a block-level
element and is centered within its container.
Example
<!DOCTYPE
html>
<html>
<head>
<style>
#img1 {
margin-left:
auto;
margin-right:
auto;
display:
block;
}
h1, h2 {
text-align:
center;
}
</style>
</head>
<body>
<h1>Center Image</h1>
<img src="img.png" id="img1"
alt="Centered Image">
<h2>Welcome to
Gocourse</h2>
</body>
</html>
