Spectre Media Image

The Spectre Media element includes responsive images, figures, and video classes.

In this article, we will discuss image media. To make the image responsive, we need to add the img-responsive class to <img> elements. The images will scale with the parent sizes. The img-fit-contain or img-fit-cover class to <img> or <video> elements. The media will crop itself to fit inside the element.

Spectre Media Image class:

img-responsive: This class is used to make the image responsive.
img-fit-contain: This class is used to fit the image in the defined container.
img-fit-cover: This class is used to cover the entire container.

Syntax:

<img src="..." class="img-responsive" alt="...">

Below examples illustrate the Spectre Media Image:

Example 1: In this example, we will make the image responsive by using the img-responsive class.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>SPECTRE Media Class</title>
    <link rel="stylesheet" href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre.min.css">
    <link rel="stylesheet" href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre-exp.min.css">
    <link rel="stylesheet" href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre-icons.min.css">
    <style>
        img {
            border: 4px solid green;
            padding: 4px;
            margin: 4px;
        }
    </style>
</head>

<body>
    <center>
        <h1 class="text-success">GeeksforGeeks</h1>
        <strong>SPECTRE Media Image</strong>
        <br>
            <div>
                <strong><u>img-responsive:</u></strong>
                <br>
                <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220202160711/GFG-300x100.png" 
                     class="img-responsive" 
                     width="400" height="100">
            </div>
    </center>
</body>
  
</html>

Output:

Example 2: In this example, we will use the img-fit-contain class.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>SPECTRE Media Class</title>
    <link rel="stylesheet" href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre.min.css">
    <link rel="stylesheet" href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre-exp.min.css">
    <link rel="stylesheet" href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre-icons.min.css">
    <style>
        img {
            border: 4px solid green;
            padding: 4px;
            margin: 4px;
        }
    </style>
</head>

<body>
    <center>
        <h1 class="text-success">GeeksforGeeks</h1>
        <strong>SPECTRE Media Image</strong>
        <br><br>
            <div>
                <strong><u>img-fit-contain:</u></strong>
                <br>
                <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220202160711/GFG-300x100.png" 
                     class="img-fit-contain"
                     width="400" height="100">
            </div>
     </center>
</body>
  
</html>

Output:

Spectre Media Image

Example 3: The following example demonstrates the img-fit-cover class.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>SPECTRE Media Class</title>
    <link rel="stylesheet" href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre.min.css">
    <link rel="stylesheet" href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre-exp.min.css">
    <link rel="stylesheet" href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre-icons.min.css">
    <style>
        img {
            border: 4px solid green;
            padding: 4px;
            margin: 4px;
        }
    </style>
</head>

<body>
    <center>
        <h1 class="text-success">GeeksforGeeks</h1>
        <strong>SPECTRE Media Image</strong>
        <br><br>
            <div>                
                <strong><u>img-fit-cover:</u></strong>
                <br>
                <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220202160711/GFG-300x100.png" 
                    class="img-fit-cover"
                    width="400" height="100">
            </div>
     </center>
</body>
</html>

Output:

Spectre Media Image

Reference: https://picturepan2.github.io/spectre/elements/media.html#media-images

Explore