如何在液体中使用媒体查询制作图片srcset(shopify)

时间:2018-07-14 08:36:04

标签: image shopify liquid responsive-images srcset

我希望为我的产品以及设备中通过Shopify的“自定义”部分上传的所有内容提供设备专用图像。

我希望生成类似以下的内容:

<picture>
    <source media="(min-width: 1028px)" srcset="path/image-desktop.jpg 1x, path/image-desktop@2x.jpg 2x">
    <source media="(min-width: 768px)"  srcset="path/image-tablet.jpg 1x, path/image-tablet@2x.jpg 2x">
    <source media="(max-width: 768px)"  srcset="path/image-mobile.jpg 1x, path/image-mobile@2x.jpg 2x">
    <img src="path/image.jpg" alt="">
</picture>

如何在液态中将其作为可重复使用的代码段用于产品图像,收藏图像和定制部分中的上传图像?我不希望使用js库来处理它。

提前谢谢!

0 个答案:

没有答案