El elemento Spectre Media incluye imágenes receptivas, figuras y clases de video.
En este artículo, discutiremos los medios de imagen. Para que la imagen responda, debemos agregar la clase img-responsive a los elementos <img> . Las imágenes se escalarán con los tamaños principales. La clase img-fit-contain o img-fit-cover a los elementos <img> o <video> . Los medios se recortarán para caber dentro del elemento.
Clase de imagen de Spectre Media:
- img-responsive: esta clase se utiliza para hacer que la imagen responda.
- img-fit-contain: esta clase se utiliza para ajustar la imagen en el contenedor definido.
- img-fit-cover: esta clase se utiliza para cubrir todo el contenedor.
Sintaxis:
<img src="..." class="img-responsive" alt="...">
Los siguientes ejemplos ilustran la imagen de Spectre Media:
Ejemplo 1: En este ejemplo, haremos que la imagen responda usando la clase img-responsive .
HTML
<!DOCTYPE html>
<html>
<head>
<title>SPECTRE Media Class</title>
<link rel="stylesheet" href=
"https://unpkg.com/spectre.css/dist/spectre.min.css">
<link rel="stylesheet" href=
"https://unpkg.com/spectre.css/dist/spectre-exp.min.css">
<link rel="stylesheet" href=
"https://unpkg.com/spectre.css/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>
Producción:
Ejemplo 2: En este ejemplo, usaremos la clase img-fit-contain .
HTML
<!DOCTYPE html>
<html>
<head>
<title>SPECTRE Media Class</title>
<link rel="stylesheet" href=
"https://unpkg.com/spectre.css/dist/spectre.min.css">
<link rel="stylesheet" href=
"https://unpkg.com/spectre.css/dist/spectre-exp.min.css">
<link rel="stylesheet" href=
"https://unpkg.com/spectre.css/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>
Producción:
Ejemplo 3: El siguiente ejemplo demuestra la clase img-fit-cover .
HTML
<!DOCTYPE html>
<html>
<head>
<title>SPECTRE Media Class</title>
<link rel="stylesheet" href=
"https://unpkg.com/spectre.css/dist/spectre.min.css">
<link rel="stylesheet" href=
"https://unpkg.com/spectre.css/dist/spectre-exp.min.css">
<link rel="stylesheet" href=
"https://unpkg.com/spectre.css/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>
Producción:
Referencia: https://picturepan2.github.io/spectre/elements/media.html#media-images
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA