Question

我们目前正在网站上使用Zurb Foundation，并希望使用数据交换而不是背景图像。

当它处理带有图像扩展名（JPG，PNG）的图像时，只要我们尝试使用CMS动态创建的图像，它就会窒息。

示例：

<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en"> <![endif]-->
<html class="no-js" lang="en">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>data-interchange test</title>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/normalize.css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/foundation.css"/>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/vendor/modernizr.js"></script>
</head>
<body>
<div class="row"><div class="large-12 columns">
    <div data-interchange="[http://bus.wisc.edu/_images/template/global/thin/logo-horizontal.png, (default)]" style="width:100%;height:400px;">
        JPG extension
    </div>
</div></div>

<div class="row"><div class="large-12 columns">
    <div data-interchange="[https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=640&h=150, (default)]" style="width:100%;height:400px;">
        Dynamic image
    </div>
</div></div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/vendor/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/foundation/foundation.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/foundation/foundation.interchange.min.js"></script>
    <script>
        $(document).foundation();
    </script>
</body>
</html>

基于their documentation on Interchange，听起来他们将其视为内容并尝试将其加载：

当您添加包含图像路径（.jpg，.jpeg，.png，.gif，.bmp，.tiff）的数据交换属性时，它将设置背景图像css属性，而不是替换元素内容。相应的路径。

它所没有的是一种告诉基金会将其视为形象的方法，这是我所希望的。

有没有办法告诉Foundation将URL视为特定类型（图像与内容）？

我能让Zurb Foundation通过数据交换来处理动态图像吗？

0 个答案: