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.
<!DOCTYPE html><html>
<head>
<title>SPECTRE Media Class</title>
<link rel="stylesheet" href=
<link rel="stylesheet" href=
<link rel="stylesheet" href=
<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=
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.
<!DOCTYPE html><html>
<head>
<title>SPECTRE Media Class</title>
<link rel="stylesheet" href=
<link rel="stylesheet" href=
<link rel="stylesheet" href=
<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=
class="img-fit-contain"
width="400" height="100">
</div>
</center>
</body>
</html>
|
Output:
Example 3: The following example demonstrates the img-fit-cover class.
<!DOCTYPE html><html>
<head>
<title>SPECTRE Media Class</title>
<link rel="stylesheet" href=
<link rel="stylesheet" href=
<link rel="stylesheet" href=
<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=
class="img-fit-cover"
width="400" height="100">
</div>
</center>
</body>
</html>
|
Output:
Reference: https://picturepan2.github.io/spectre/elements/media.html#media-images