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

<divid="imgWrapper"><iron-imagesrc="image.png"></iron-image></div>

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

<styleis="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><styleis="custom-style"include="uvalib-theme">:host {
      display: block;
      width: 100%;
      height: auto;
    }
    iron-image {
      --iron-image-width: 100%;
    }
  </style><iron-imagewidth="100%"src="myimg"></iron-image>

Solution 3:

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

<paper-cardimage="YOUR_IMAGE_URL_HERE"><divclass="card-content"><imgsrc="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.