Alexandru Alexandru - 7 months ago 88
HTML Question

Stretch image in iron-image element

I have an element inside a div :

<div style="width:330px;"><iron-image src="image.png"></iron-image></div>
.
The image is 315px in width and 237px height. I want this image to stretch and make it 330px in width as it the container that is inside of, and the height to be auto to do not break the image ratio.


I have tried this :

iron-image {
width:330px;
height:auto;
}
iron-image img {
width:330px;
height:auto;
}



And :

<div style="width:330px;"><iron-image src="image.png" style="width:330px;height:auto"></iron-image></div>


How do i make the
<img ... >
element inside the
<iron-image>
element stretch to 330px width and automatic height ?

Answer

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 !