0

我想要两种尺寸的图像，用于小屏幕和大屏幕。使用fancybox，我使用该srcset属性来更改fancybox 演示中描述的全视图图像，如下所示：

    <a  data-fancybox="test-srcset"
        data-type="image"
        href="img1200px.jpeg"
        data-srcset="img1200px.jpeg 1200w,
                     img640px.jpeg 640w"
    >
        <img width="250" src="img250px.jpeg" />
    </a>

来自 fancybox 的完整示例：https ://codepen.io/anon/pen/wNdyYm?editors=1000

在我的页面的移动设备上，我设置了 meta ：

<meta name="viewport" content="width=device-width" />

但是用fancybox，没有设置选项，手机上加载的是高清（1200px）而不是小。

我能做些什么 ？是否有任何 jQuery hack 或其他任何东西？

谢谢

4

2 回答 2

1

实际上，脚本srcset为图像标签设置了相同的值，其余的取决于浏览器。但是浏览器之间在如何选择要使用的源方面存在不一致，例如，在 chrome 和 ff 上查看这个演示https://codepen.io/fancyapps/pen/LJwvzY?editors=1000，并尝试调整它们的大小.

于 2019-02-02T17:11:41.450 回答
0

所以我想出了一个 CSS/html 解决方案，使用meta标签和媒体查询@media，没有srcset属性。

  • class根据设备宽度对每个链接使用 a来显示或不显示它。
  • 为每张图片使用不同的链接指向完整图片。
  • 使用该data-fancybox属性来区分两个全视图画廊。

这应该有效。

<!-- To have mobile considering the real width -->
<meta name="viewport" content="width=device-width" />

<div id="image1">
    <a  data-fancybox="gallery-screen" 
        data-type="image"
        href="img1200px.jpeg"
        class="screen"
    >
        <img width="250" src="img250px.jpeg" />
    </a>
    <a  data-fancybox="gallery-mobile" 
        data-type="image"
        href="img640px.jpeg"
        class="mobile"
    >
        <img width="250" src="img250px.jpeg" />
    </a>
</div>

CSS 显示良好的图像链接：

@media all and (max-width: 640px) {
    .screen {
        display: none;
    }
}

@media all and (min-width: 641px) {
    .mobile {
        display: none;
    }
}

请参阅代码笔示例

于 2019-02-03T11:44:48.410 回答