Polimero - Immagine di ferro

L '<iron-image> è un elemento di visualizzazione delle immagini. L'immagine viene visualizzata con le utili opzioni di dimensionamento e precaricamento.

Anche l'opzione di dimensionamento crops (copertina) o letterboxes(contiene) l'immagine per adattarla alla dimensione specificata mentre l'opzione precaricamento blocca il rendering dell'immagine. Nel frattempo, puoi utilizzare il colore di sfondo CSS dell'elemento come segnaposto oppure puoi preferire un URI di dati. Ilfade l'opzione sfuma l'immagine / il colore del segnaposto dopo aver renderizzato l'immagine.

L'elemento <iron-image> è simile a <img scr = "...."> come mostrato nello snippet di codice seguente:

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

Esempio

Per utilizzare l'elemento iron-image, installa l'elemento iron-image utilizzando bower e importalo nel tuo file index.html. Il codice seguente mostra un'immagine semplice:

<!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>

Otterrai l'output come mostrato nello screenshot seguente.

Usa l'opzione 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>

Otterrai l'output come mostrato nello screenshot seguente.

Usa l'opzione sizing = "contiene"

<!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>

Otterrai l'output come mostrato nello screenshot seguente.

Il codice seguente visualizza lo sfondo grigio e il segnaposto con codifica base 64 fino al caricamento dell'immagine.

<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>

Il codice seguente sfuma l'immagine dopo il rendering dell'immagine.

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

La tabella seguente mostra le proprietà personalizzate dell'elemento <iron-image>.

Suor n Proprietà e descrizione personalizzate Predefinito
1

--iron-image-placeholder:

È un mixin da utilizzare per lo stile per #placeholder.

 {}
2

--iron-image-width:

Utilizzare questa proprietà per impostare la larghezza dell'immagine avvolta dall'immagine di ferro.

 auto
3

--iron-image-height:

Usa questa proprietà per impostare l'altezza dell'immagine, avvolta dall'ironimage.

 auto