El elemento Spectre Media incluye imágenes receptivas, figuras y clases de video.
En este artículo aprenderemos sobre la figura mediática. Podemos usar el elemento <figure> para una imagen con un título. Para eso, necesitamos agregar la clase figure al elemento <figure>. Las imágenes con la clase img-responsive serán responsivas. Además, también podemos decorar el pie de foto.
Clase de figura de Spectre Media:
- figura: Esta clase se utiliza para establecer el tema subtitulado de la imagen, video.
- figure-caption: esta clase se utiliza para definir el estilo básico del pie de foto.
- text-*: esta clase se utiliza para definir la alineación de los subtítulos.
Nota: El * puede estar a la izquierda, a la derecha o al centro según las necesidades de la aplicación.
Sintaxis:
<figure class="figure"> <img src="" alt=""> <figcaption class="Media Class">...</figcaption> </figure>
Ejemplo: El siguiente ejemplo ilustra la figura de Spectre Media.
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 Figure</strong>
<br><br>
<figure class="figure">
<img class="img-responsive"
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220121175934/gfg2-297x300.jpg"
alt="geeksforgeeks"
width="400px">
<figcaption class="figure-caption text-center">
GeekWeek
</figcaption>
</figure>
</center>
</body>
</html>
Producción:
Referencia: https://picturepan2.github.io/spectre/elements/media.html#media-figure
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA