Foundation CSS es un marco front-end receptivo y de código abierto creado por la fundación ZURB en septiembre de 2011, que facilita el diseño de hermosos sitios web, aplicaciones y correos electrónicos receptivos que se ven increíbles y pueden ser accesibles para cualquier dispositivo. Es utilizado por muchas empresas como Facebook, eBay, Mozilla, Adobe e incluso Disney. El marco se basa en un arranque similar a Saas. Es más sofisticado, flexible y fácilmente personalizable. También viene con CLI, por lo que es fácil de usar con paquetes de módulos. Ofrece la herramienta Fastclick.js para una renderización más rápida en dispositivos móviles.
Una miniatura es una versión más pequeña de una imagen digital completa que se puede ver fácilmente mientras se navega por varias imágenes. Se utilizan para recorrer las páginas mediante una etiqueta de anclaje. Para convertir una imagen en una miniatura en Foundation CSS, podemos usar la clase .thumbnail . La clase de miniatura se puede aplicar a la etiqueta <img> así como a la etiqueta <a>.
Clase de imagen en miniatura de Foundation CSS:
- thumbnail: la clase thumbnail convierte una imagen normal en una imagen en miniatura.
Sintaxis:
<img class="thumbnail" src="image"> // OR <a href="#" class="thumbnail"><img src="image"></a>
Ejemplo 1: este ejemplo muestra una imagen en miniatura creada con la clase de miniatura de CSS básico en la etiqueta <img>.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Foundation CSS Thumbnail</title> <!-- Compressed CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"> <!-- Compressed JavaScript --> <script src= "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"> </script> <script src= "https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js"> </script> </head> <body style="padding: 30px;"> <center> <h1 style="color: green;"> GeeksforGeeks </h1> <strong>Foundation CSS Thumbnail Image</strong> <br /><br /> </center> <img class="thumbnail" alt="THumbnail image" src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> <img class="thumbnail" alt="THumbnail image" src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png"> <img class="thumbnail" alt="THumbnail image" src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> <script> $(document).foundation(); </script> </body> </html>
Producción:
Miniatura de CSS de OutputFoundation
Ejemplo 2: este ejemplo muestra una imagen en miniatura creada con la clase de miniaturas de CSS básico en la etiqueta <a>.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Foundation CSS Thumbnail</title> <!-- Compressed CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"> <!-- Compressed JavaScript --> <script src= "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"> </script> <script src= "https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js"> </script> </head> <body style="padding: 30px;"> <center> <h1 style="color: green;"> GeeksforGeeks </h1> <strong>Foundation CSS Thumbnail</strong> <br /><br /> </center> <a class="thumbnail" href="https://www.geeksforgeeks.org/"> <img alt="THumbnail image" src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> </a> <a class="thumbnail" href="https://www.geeksforgeeks.org/"> <img alt="THumbnail image" src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png"> </a> <a class="thumbnail" href="https://www.geeksforgeeks.org/"> <img alt="THumbnail image" src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> </a> <script> $(document).foundation(); </script> </body> </html>
Producción:
Miniatura de CSS de OutputFoundation
Referencia: https://get.foundation/sites/docs/thumbnail.html
Publicación traducida automáticamente
Artículo escrito por mishrapriyank17 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA