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 =
< 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.
HTML
<!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.
HTML
<!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
Last Updated :
13 Jun, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...