0

我有一个具有 12 列布局的站点，我正在尝试找出正确使用 srcset 和 sizes 属性来匹配我的设计。

我有一个边箱，它在桌面上跨越 3 列，但在平板电脑和手机尺寸中，它跨越 12 列（100% 宽度）。

我想要的是桌面版本中使用的图像，也可用于移动设备（最大宽度 480 像素），以及用于 481 像素和 781 像素之间的所有内容的特定平板电脑大小的图像。

这是我的代码：

<img
    src="http://placehold.it/370x150/cecece"
    srcset="http://placehold.it/768x311/f67f57 768w, http://placehold.it/370x150/cecece 320w"
    sizes="(max-width: 768px) 100vw, (max-width: 480px) 100vw"
>

在我的例子中，一直使用 768 版本直到 780px，然后使用默认的 src。但是我如何让它使用 320 版本直到 480px？

4

1 回答 1

0

这个怎么样：

<img  
    sizes="(min-width: 781px) 370px, 100vm"
    srcset="http://placehold.it/768x311/f67f57 768w, 
            http://placehold.it/370x311/cecece 480w"
>

它应该显示最大为 480 像素的最小图像，然后是最大 780 像素的大图像和大于 780 像素的小图像。

于 2014-11-02T01:59:02.427 回答