Tachyons Element Images se utiliza para fijar el ancho de una imagen para que la imagen no se pueda insertar. Podemos insertar una imagen a través de una etiqueta de imagen. La etiqueta de imagen tiene la siguiente clase que se utiliza para mejorar la imagen.
Sintaxis:
<img src=" "
class="Tachyons Layout Widths Classes"
alt=" ">
Clases de imágenes de elementos de taquiones: no hay clases predefinidas que los taquiones proporcionen para esto, necesitamos usar width the lass para corregir el ancho de las imágenes cargadas.
Para lograr la característica del elemento Tachyons Images, necesitamos usar las clases de elementos mencionadas a continuación.
- Anchos de diseño de taquiones: Esto se utiliza para proporcionar ancho a la imagen.
Los siguientes ejemplos ilustran las imágenes del elemento Tachyons:
Ejemplo 1: en el siguiente código, insertaremos una imagen usando el kit de herramientas Tachyons.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
href=
"https://unpkg.com/tachyons/css/tachyons.min.css">
<style>
div {
text-align: center;
}
</style>
</head>
<body>
<h2 style="color:green;
text-align:center;">
GeeksforGeeks
</h2>
<h3 style="text-align:center;">
Tachyons Element Images
</h3>
<div>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-13.png"
class="w-50"
alt="GFG">
</div>
</body>
</html>
Producción:
Imágenes de elementos Tachyons
Ejemplo 2: En el siguiente código insertaremos una imagen usando el kit de herramientas Tachyons.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
href=
"https://unpkg.com/tachyons/css/tachyons.min.css">
<style>
body {
background-color: lightgrey;
}
div {
text-align: center;
}
</style>
</head>
<body>
<h2 style="color:green; text-align:center;">
GeeksforGeeks Logo
</h2>
<h3 style="text-align:center;">
Tachyons Element Images
</h3>
<div>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-13.png"
class="w-50"
alt="GFG">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-13.png"
class="w-100"
alt="GFG">
</div>
</body>
</html>
Producción:
Imágenes de elementos Tachyons
Referencia: https://tachyons.io/docs/elements/images/