Polímero - Imagen de hierro

<iron-image> es un elemento de visualización de imágenes. La imagen se muestra con las útiles opciones de tamaño y precarga.

La opción de tamaño ya sea crops (tapa) o letterboxes(contener) la imagen para que se ajuste a su tamaño especificado, mientras que la opción de precarga bloquea la imagen para que no se renderice. Mientras tanto, puede usar el color de fondo CSS del elemento como marcador de posición o puede preferir un URI de datos. losfade La opción desvanece la imagen / color del marcador de posición después de renderizar la imagen.

El elemento <iron-image> es similar a <img scr = "...."> como se muestra en el siguiente fragmento de código:

<iron-image src = "http://lorempixel.com/600/600"></iron-image>

Ejemplo

Para usar el elemento iron-image, instale el elemento iron-image usando bower e impórtelo en su archivo index.html. El siguiente código muestra una imagen simple:

<!DOCTYPE html>
<html>
   <head>
      <title>iron-image</title>
      <base href = "https://polygit.org/components/">
      <script src = "webcomponentsjs/webcomponents-lite.js"></script>
      <link rel = "import" href = "iron-image/iron-image.html">
   </head>
  
   <body>
      <h1>Iron-Image Example</h1>
      <iron-image src = "http://www.tcgreenmedia.com/wp-content/uploads/2014/07/google-developers-v01-510x380.png" 
         alt = "iron-image" ></iron-image>
   </body>
</html>

Obtendrá el resultado como se muestra en la siguiente captura de pantalla.

Utilice la opción sizing = "cover"

<!DOCTYPE html>
<html>
   <head>
      <title>iron-image</title>
      <base href = "https://polygit.org/components/">
      <script src = "webcomponentsjs/webcomponents-lite.js"></script>
      <link rel = "import" href = "iron-image/iron-image.html">
  
      <style>
         #sizing-cover {
            width: 140px;
            height: 140px;
            background: LightGrey;
            margin-left: 20px;
         }
      </style>
   </head>
  
   <body>
      <h1>Example using sizing = "cover"</h1>
      <iron-image src = "http://www.tcgreenmedia.com/wp-content/uploads/2014/07/google-developers-v01-510x380.png"
         sizing = "cover" id = "sizing-cover" alt = "iron-image" ></iron-image>
   </body>
</html>

Obtendrá el resultado como se muestra en la siguiente captura de pantalla.

Utilice la opción tamaño = "contener"

<!DOCTYPE html>
<html>
   <head>
      <title>iron-image</title>
      <base href = "https://polygit.org/components/">
      <script src = "webcomponentsjs/webcomponents-lite.js"></script>
      <link rel = "import" href = "iron-image/iron-image.html">
  
      <style>
         #sizing-contain {
            width: 140px;
            height: 140px;
            background: #ddd;
            margin-left: 20px;
         }
      </style>
   </head>
  
   <body>
      <h1>Example using sizing = "contain"</h1>
      <iron-image src = "http://www.tcgreenmedia.com/wp-content/uploads/2014/07/google-developers-v01-510x380.png"
         sizing = "contain" id = "sizing-contain" alt = "iron-image" ></iron-image>
   </body>
</html>

Obtendrá el resultado como se muestra en la siguiente captura de pantalla.

El siguiente código muestra el fondo gris y el marcador de posición codificado en base 64 hasta que se carga la imagen.

<iron-image style = "width:800px; height:600px; background-color: grey;"
   placeholder = "data:image/jpeg;base64,..."
   sizing = "cover" preload src = "http://lorempixel.com/600/600"></iron-image>

El siguiente código desvanece la imagen después de renderizarla.

<iron-image style = "width:800px; height:600px; background-color: grey;"
   sizing = "cover" preload fade src = "http://lorempixel.com/600/600"></iron-image>

La siguiente tabla muestra las propiedades personalizadas del elemento <iron-image>.

No Señor Propiedades personalizadas y descripción Defecto
1

--iron-image-placeholder:

Es un mixin que se usa para diseñar para #placeholder.

{}
2

--iron-image-width:

Utilice esta propiedad para establecer el ancho de la imagen envuelta por la imagen de hierro.

auto
3

--iron-image-height:

Utilice esta propiedad para establecer la altura de la imagen, envuelta por la imagen de hierro.

auto