Question

我正在寻找一种轻松的方式，为内容添加响应式替代图像。例如，我有三个不同的图像，每个图像对应一种尺寸（桌面，平板电脑和移动设备），并希望根据响应断点显示它们。

基金会框架有＆＃34;交换＆＃34;内置，但没有简单的方法来添加图像，除了添加代码：

<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）。

by viewport

<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插件并制作了一个简单的附加插件，使内容编辑器能够附加两个不同的图像。该插件只是编写这些图像标签和基础框架css隐藏并相应地显示它们：

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

我无法在Visual Composer中使用Foundations Interchange图像。也许它有关于javascript队列的事情。 Visual Composer内容在基础之后加载。

Wordpress通过响应断点更改图像网址？

3 个答案: