Question

我在div中有一个元素：<div style="width:330px;"><iron-image src="image.png"></iron-image></div>。图像宽度为315像素，高度为237像素。我希望这个图像能够拉伸并使其宽度为330像素，就像它内部的容器一样，并且自动高度不会破坏图像比例。
我试过这个：

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

和：

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

如何让<img ... >元素中的<iron-image>元素拉伸到330px宽度和自动高度？

Answer 1

我遇到了同样的问题，sizing属性对我没有帮助，而且因为铁图像中的img在阴暗的DOM下，你可以用:: content访问它。

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

和

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

for :: content在light dom中工作（在自定义元素之外）不要忘记

<style is="custom-style">

希望它有所帮助！

Answer 2

我一直在寻找一种方法来做宽100％和高度自动。这对我有用：

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

Answer 3

我有相同的problem并找到paper-card。它完美地运作：

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

Answer 4

我还想更新＆＃34; img＆＃34;标签样式是＆＃34;＆＃34;＆＃34; （=影子DOM）铁像。

为此，我更新了样式，这里是飞镖码：

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

此代码放在PolymerElement＆＃34;附加＆＃34;可用功能（不会在＆＃34;准备好＆＃34;功能中）

附加在元素附加到文档后调用。

在铁图像元素中拉伸图像

4 个答案: