Polymer 聚合物铁图像动态施胶&x27；我不在野生动物园工作

我正试图通过计算正确的宽度和高度作为属性，并在熨斗图像的样式属性中使用它，将熨斗图像的网格完美地安装到屏幕上。这在Chrome和Firefox上运行良好，但在Safari上不行

<dom-module id="x-example">
<style>
    :host {
        display: block;
    }
</style>
<template>
    <div>
        image sizes should be {{imgWidth}} x {{imgWidth}}px
    </div>
    <iron-image src="http://lorempixel.com/200/200/" style="width: {{imgWidth}}px; height:{{imgWidth}}px" sizing="cover" preload fade></iron-image>
    <iron-image src="http://lorempixel.com/400/200/" style="width: {{imgWidth}}px; height:{{imgWidth}}px" sizing="cover" preload fade></iron-image>  
    <iron-image src="http://lorempixel.com/400/200/" style="width: {{imgWidth}}px; height:{{imgWidth}}px" sizing="cover" preload fade></iron-image>
</template>
</dom-module>

你知道为什么Safari（台式机或移动设备）上不起作用吗？这些图像根本没有显示出来

---

style

是本机属性，但您没有使用（

attr$=“value”

）。实际上，您正在

上设置一个名为

style

的新属性，该属性对Safari中元素的样式设置没有影响

要修复此问题，只需将

style=“…”

切换到

style$=“…”

：

---

在Safari 10.0.3和Safari技术预览版10.2（第5版）中进行了测试。

Ugh，完全忘记了属性绑定。它在Chrome/FF中工作的事实（为什么会这样？）让我觉得我没有遗漏一些基本的东西。非常感谢@RonanCremin没问题：）

addEventListener('WebComponentsReady', function() {
    Polymer({
        is: 'x-example',
        properties: {
            imgWidth: {
                type: Number,
                value: function () {
                    return Math.round(window.innerWidth / 2); 
                }
            },
        }
    });
});

<iron-image style$="width: {{imgWidth}}px; height:{{imgWidth}}px" ...></iron-image>
<iron-image style$="width: {{imgWidth}}px; height:{{imgWidth}}px" ...></iron-image>  
<iron-image style$="width: {{imgWidth}}px; height:{{imgWidth}}px" ...></iron-image>