Pictures assume a significant part of any page. However, it isn't prescribed to incorporate plenty of pictures, yet utilize great pictures any place required. CSS assumes a decent part to control picture show. You can set the accompanying picture properties utilizing CSS.
- The border property is utilized to set the width of a picture line.
- The height property is utilized to set the tallness of a picture.
- The width property is utilized to set the width of a picture.
- The - moz-opacity property is utilized to set the murkiness of a picture.
The Image Border Property
The border property of a picture is utilized to set the width of a picture border. This property can have a worth long or in %. A width of zero pixels implies no border. For example:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div{
border:3px dashed red;
}
img{
height: 300px;
width: 300px;
}
</style>
</head>
<body>
<div>
<img src="https://yt3.ggpht.com/ytc/AKedOLQCxwWkeIU4jyhDL-1vXucz-mquq4uPnTsyUtGiyA=s900-c-k-c0x00ffffff-no-rj">
</div>
</body>
</html>
Output:
The Image Height Property
The height property of a picture is utilized to set the tallness of a picture. This property can have a worth long or in %. While giving worth in %, it applies it in regard of the crate in which a picture is accessible. For example:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div{
border:1px solid red; height:50%;
}
img{
height: 300px;
width: 300px;
}
</style>
</head>
<body>
<div>
<img src="https://yt3.ggpht.com/ytc/AKedOLQCxwWkeIU4jyhDL-1vXucz-mquq4uPnTsyUtGiyA=s900-c-k-c0x00ffffff-no-rj">
</div>
</body>
</html>
The Image Width Property
The width property of a picture is utilized to set the width of a picture. This property can have a worth long or in %. While giving worth in %, it applies it in regard of the crate in which a picture is accessible.
For example:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div{
border:1px solid red; width:150px;
}
img{
height: 300px;
width: 300px;
}
</style>
</head>
<body>
<div>
<img src="https://yt3.ggpht.com/ytc/AKedOLQCxwWkeIU4jyhDL-1vXucz-mquq4uPnTsyUtGiyA=s900-c-k-c0x00ffffff-no-rj">
</div>
</body>
</html>
Output:
