Stretch Image In Iron-image Element

I have an element inside a div :

. The image is 315px in width and 237px height. I

Solution 1:

I had the same problem, the sizing attribute doesn't help me for that, and because the img inside iron-image is under shady DOM, you can access it with ::content.

#imgWrapper {
    width: 330px;
}
iron-image {
    width:100%;
}
iron-image::content img {
    width: 100%;
}

and

<div id="imgWrapper">
    <iron-image src="image.png"></iron-image>
</div>

for ::content to work in light dom (outside of a custom element) don't forget

<style is="custom-style">

Hope it helps !

Solution 2:

I was looking for a way to do width 100% and height to auto. This worked for me:

<template>
  <style is="custom-style" include="uvalib-theme">
    :host {
      display: block;
      width: 100%;
      height: auto;
    }
    iron-image {
      --iron-image-width: 100%;
    }
  </style>

  <iron-image width="100%" src="myimg"></iron-image>

Solution 3:

I have the same problem and found paper-card. It works perfectly:

<paper-card image="YOUR_IMAGE_URL_HERE">
  <div class="card-content">
     <img src="OR_HERE">
  </div>
</paper-card>

Solution 4:

I also wanted to update "img" tag style which is "under" (=shadow DOM) the iron-image.

To do so I have updated the style, here is the dart code:

querySelectorAll('img').forEach((Element img) {
img.setAttribute('style', 'width:330px;height:auto');
});

This code is placed within the PolymerElement "attached" available function (wouldn't work in the "ready" function)

attached Called after the element is attached to the document.