WordPress 通过响应断点更改图像 url？

Question

我正在寻找一种方法来轻松地将响应式替代图像添加到内容中。例如，我有三张不同的图片，每种尺寸一张（台式机、平板电脑和手机），我想根据响应断点显示它们。

Foundation 框架内置了 "interchange"，但没有简单的方法来添加图像，除非添加代码：

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

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

Answer 1

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

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

我建议使用 Srcset 属性，然后为您需要支持的浏览器实施回退（例如 picturefill）。

按视口

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

Answer 3

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

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

我无法让 Foundations Interchange 图像在 Visual Composer 中工作。也许它与 javascript 队列有关。 Visual Composer 内容在基础或其他内容之后加载..

WordPress 通过响应断点更改图像 url？

eWordpress change image url by responsive breakpoint?

css

wordpress