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 ?

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

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

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

回答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.

来源：https://stackoverflow.com/questions/31671084/stretch-image-in-iron-image-element

标签

html

css

image

polymer

polymer-1.0