eWordpress通过响应断点改变图像url？

Question

我正在寻找一种方法，可以轻松地向内容中添加响应性的替代图像。例如，我有三种不同的图像，每种大小一张(桌面、平板电脑和移动)，并希望根据响应断点显示它们。

基金会框架内置了“交换”功能，但是除了添加代码之外，添加映像并没有简单的方法：

<img data-interchange="[/path/to/small-image.jpg, (small)], [/path/to/bigger-image.jpg, (large)]">

有人知道有什么插件能做到这一点吗？

Answer 1

好吧，我就这样解决了。(http://i.stack.imgur.com/jWcDD.png)我使用了Visual插件，并制作了一个简单的插件，使内容编辑器能够附加两个不同的图像。插件只编写这些图像标记，而基金会框架css隐藏并相应地显示它们：

<img src="default.jpg" class="show-for-medium-up">
<img src="small.jpg" class="show-for-small-only">

我无法在Visual中获得基金会交换图像。也许它与javascript队列有关。Visual Composer内容在创建后加载或什么的。

Answer 2

您可以在页面中插入所有三个图像，并显示每个图像的特定屏幕宽度；

<div>
    <img class="image-small" src="/path/to/small-image.jpg" /> 
    <img class="image-medium" src="/path/to/medium-image.jpg" /> 
    <img class="image-big" src="/path/to/big-image.jpg" /> 
</div>

.image-medium,
.image-small{
    display: none;
}

@media screen and (max-width: 800px){
   .image-medium{
       display: inline;
   }

   .image-big{
       display: none;
   }
}

@media screen and (max-width: 400px){
   .image-small{
       display: inline;
   }

   .image-big{
       display: none;
   }
}

Answer 3

我建议使用Srcset属性，然后实现回退(例如。( 图片填充)对于您需要支持的浏览器。

通过视口

<img src="img-1x.jpg"
     srcset="img-1x.jpg 500w, img-2x.jpg 800w"
     alt="">

或通过决议

<img src="img-1x.jpg"
     srcset="img-1x.jpg 1x, img-2x.jpg 2x"
     alt="">