I have an element inside a div :
.
The image is 315px in width
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.
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>
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 !
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>