CSS

CSS - Images

CSS - Images

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:


Top course recommendations for you

    Factorial Program in C
    2 hrs
    Beginner
    5.2K+ Learners
    4.46  (556)
    Jenkins Tutorial
    1 hrs
    Beginner
    8.7K+ Learners
    4.52  (708)
    Dockerize Spring Boot Application
    1 hrs
    Intermediate
    4K+ Learners
    4.46  (325)
    Python Data Structures
    1 hrs
    Beginner
    31.7K+ Learners
    4.5  (2546)
    Fibonacci Series in Java
    2 hrs
    Beginner
    2.8K+ Learners
    4.39  (69)
    Priority Queue in C++
    1 hrs
    Beginner
    2.2K+ Learners
    4.38  (110)
    Introduction to MATLAB
    2 hrs
    Beginner
    22.4K+ Learners
    4.41  (1798)
    Packages in Python
    1 hrs
    Beginner
    7.4K+ Learners
    4.33  (568)
    Palindrome in Python
    2 hrs
    Beginner
    2.9K+ Learners
    4.65  (92)