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
    4.5K+ Learners
    4.42  (154)
    Jenkins Tutorial
    1 hrs
    Beginner
    8.4K+ Learners
    4.49  (575)
    Dockerize Spring Boot Application
    1 hrs
    Intermediate
    3.8K+ Learners
    4.4  (243)
    Python Data Structures
    1 hrs
    Beginner
    30.3K+ Learners
    4.51  (2109)
    Fibonacci Series in Java
    2 hrs
    Beginner
    2.7K+ Learners
    4.33  (58)
    Priority Queue in C++
    1 hrs
    Beginner
    2.2K+ Learners
    4.3  (97)
    Introduction to MATLAB
    2 hrs
    Beginner
    21.8K+ Learners
    4.42  (1620)
    Packages in Python
    1 hrs
    Beginner
    7.1K+ Learners
    4.38  (449)
    Palindrome in Python
    2 hrs
    Beginner
    2.8K+ Learners
    4.63  (83)