查询纵向的CSS img srcset媒体查询。

Question

我有两张图片，一张是我需要的横向图片，一张是纵向图片。

使用 <picture>，我可以使用标准的媒体查询，但 <picture> 在Safari上不支持，所以我想使用 <img srcset>. 我找不到任何信息，如何解决任何设备在纵向的信息。srcset.

任何帮助？

Answer 1

你不能使用 srcset 用于艺术指导。使用 <picture> 和 图片填充 而不是。

Answer 2

safari现在支持<图片> 。这里是显示不同的图像的代码，用于纵向和横向模式。

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