Images
Styling photos using CSS is the same as styling any other element with the Box Model of padding, borders, and margins. Though using a lot of images is not encouraged, it is still necessary to use nice images when they are needed. CSS is useful for controlling image presentation.
CSS Images properties:
- Images for thumbnails : Thumbnail pictures are created using the border attribute.
- The border-radius attribute : It is used to set the radius of the border picture. One, two, three, or four values can be stored in this attribute. Border-top-left-radius, border-top-right-radius, border-bottom-left-radius, and border-bottom-right-radius are the four characteristics that make it up.
- Responsive Images : A responsive image is one that automatically adjusts to the size of the box it is placed in.
- Translucent Image : To make an image transparent, utilise the opacity property. Between 0.0 and 1.0 is the opacity value.
- Center the image : The left-margin and right-margin properties can be used to centre pictures within a box.
Images can be styled in multiple ways
Example No.1:
<![CDATA[
<html>
<html lang="en-US">
<style>
img {
border-radius: 8px;
}
</style>
</head>
<body>
<h2>Knowledge2life</h2>
<p>Use the border-radius property to create rounded images:</p>
<img src="/img/CSS_img/images-1-3.png" alt="error" width="300" height="300">
</body>
</html>]]>
OUTPUT:
Knowledge2life
Use the border-radius property to create rounded images:
Example No.2:
<![CDATA[
<html>
<html lang="en-US">
<style>
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<h2>Knowledge2life</h2>
<img src="/img/CSS_img/images-1-5.png" alt="error" width="600" height="300">
</body>
</html>
]]>
OUTPUT:
Knowledge2life
