Fundación - Uso de intercambio con imágenes

Descripción

Al utilizar el intercambio de imágenes, puede establecer el tamaño de la imagen según el tamaño de la pantalla, es decir, grande, mediano o pequeño. La imagen se muestra más pequeña en el dispositivo de pantalla pequeña. Para determinar el dispositivo de los usuarios para qué imagen servir, se utilizan las consultas de medios CSS.

Ejemplo

El siguiente ejemplo demuestra el uso del intercambio con imágenes en Foundation:

<!DOCTYPE html>
<html>
   <head>
      <title>Foundation Template</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/foundation.css">
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/foundation.min.js"></script>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script>
   </head>

   <body>
      <h2>Example of use with images</h2>
      <img data-interchange = "[/foundation/images/foundation-plugin/small.jpg, (default)], 
         [/foundation/images/foundation-plugin/small.jpg, (small)], 
         [/foundation/images/foundation-plugin/medium.jpg, (medium)]">
      
      <script>
         $(document).ready(function() {
            $(document).foundation();
         })
      </script>
   </body>
</html>

Salida

Realicemos los siguientes pasos para ver cómo funciona el código dado anteriormente:

Guarde el código html dado anteriormente use_images.html archivo.
Abra este archivo HTML en un navegador, se muestra una salida como se muestra a continuación.

↰ Previous page