CSS图片srcset媒体查询应用于纵向方向的情况。

Question

我有两张图片，一个需要横向方向，一个需要纵向方向。 使用 <picture> 标签，我可以使用标准的媒体查询，但是 Safari 不支持 <picture> 标签，所以我想使用 <img srcset> 标签。我找不到任何关于如何在 srcset 中为任何设备指定纵向方向的信息。 有没有帮助？

- user2869150

---

据我所知，srcset仅支持像素密度，不支持完整的媒体查询。但是，你为什么不能在CSS中使用background-image和实际的媒体查询呢？ - Mr Lister

Answer 1

你不能使用 srcset 进行艺术方向的处理。请使用 <picture> 和 picturefill。

- zcorpan

Answer 2

Safari现在支持<picture>。以下是用于显示纵向和横向模式下不同图像的代码。

<picture>
    <source media="(orientation: landscape)" srcset="landscape.jpg">
    <source media="(orientation: portrait)" srcset="portrait.jpg">
    <img src="fallback-image.jpg">
</picture>

- Nikhil