Polímero - Imagem de Ferro

A <iron-image> é um elemento de exibição de imagem. A imagem é exibida com as opções úteis de dimensionamento e pré-carregamento.

A opção de tamanho também crops (capa) ou letterboxes(conter) a imagem para caber em seu tamanho especificado, enquanto a opção de pré-carregamento impede que a imagem seja renderizada. Enquanto isso, você pode usar a cor de fundo CSS do elemento como espaço reservado ou pode preferir um URI de dados. ofade opção esmaece a imagem / cor do espaço reservado após renderizar a imagem.

O elemento <iron-image> é semelhante a <img scr = "...."> conforme mostrado no seguinte trecho de código -

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

Exemplo

Para usar o elemento iron-image, instale o elemento iron-image usando o bower e importe-o em seu arquivo index.html. O código a seguir exibe uma imagem simples -

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

Você obterá a saída conforme mostrado na imagem a seguir.

Use a opção 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>

Você obterá a saída conforme mostrado na imagem a seguir.

Use a opção sizing = "contém"

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

Você obterá a saída conforme mostrado na imagem a seguir.

O código a seguir exibe o fundo cinza, bem como o espaço reservado codificado em base 64 até que a imagem seja carregada.

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

O código a seguir esmaece a imagem depois que ela é renderizada.

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

A tabela a seguir mostra as propriedades personalizadas do elemento <iron-image>.

Sr. Não Propriedades personalizadas e descrição Padrão
1

--iron-image-placeholder:

É um mixin a ser usado para estilizar o #placeholder.

 {}
2

--iron-image-width:

Use esta propriedade para definir a largura da imagem envolvida pela imagem de ferro.

 auto
3

--iron-image-height:

Use esta propriedade para definir a altura da imagem, envolvida pela imagem de ferro.

 auto
polímero_elementos.htm