基础交换响应图像仅加载 img src

Question

到目前为止 foundation.So 的新手，我不知道为什么交换不起作用。唯一可用的图像是 img src。 None 个是动态生成的。这不是一条坏路，所以下面的代码是错误的还是可能需要 javascript 文件？我有 foundation.interchange.js 以及其余的 js 文件。

<img data-interchange="[img/small.jpg, (small)], [img/medium.jpg, (medium)], [img/large.jpg, (large)]" data-uuid="interchange-i2pip11r1" src="img/large-banner.jpg">

Answer 1

我也遇到了这个问题，我花了很长时间才找到答案，最后我不得不只使用普通的 css 来处理我的图像，因为我无法解决这个问题。

@media (max-width: 1120px) {
    .map {
        width: 625px;
        height: 380px;
    }
}

@media (max-width: 855px) {
    .map {
        width: 480px;
        height: 375px;
    }
}

@media (max-width: 675px) {
    .map {
        width: 0;
        height: 0;
    }
}

map 是我图片的 class。

Answer 2

这花了我很长时间，我们可能犯了同样的错误。

您的语法来自 Foundation 5。删除 "small"、"medium"、"large" 中的括号。您还应该删除 "src="，这样它就不会加载资源两次。

<img data-interchange="[img/small.jpg, small], [img/medium.jpg, medium], [img/large.jpg, large]" data-uuid="interchange-i2pip11r1">

基础交换响应图像仅加载 img src

Foundation interchange responsive images only loading img src

html

image

responsive-design

zurb-foundation