在 srcset 中指定图像大小和像素密度
Specifying both image size and pixel density in srcset
这是我的 img
标签:
<img src="https://myserver.com/image?w=667&h=375 667w"
srcset="https://myserver.com/image?w=1366&h=1024 1366w 1x,
https://myserver.com/image?w=1366&h=1024&dpr=2 1366w 2x,
https://myserver.com/image?w=1366&h=1024&dpr=3 1366w 3x,
https://myserver.com/image?w=1024&h=768 1024w 1x,
https://myserver.com/image?w=1024&h=768&dpr=2 1024w 2x,
https://myserver.com/image?w=1024&h=768&dpr=3 1024w 3x,
https://myserver.com/image?w=800&h=480 800w 1x,
https://myserver.com/image?w=800&h=480&dpr=2 800w 2x,
https://myserver.com/image?w=800&h=480&dpr=3 800w 3x" sizes="100%">
我正在使用 imgix,它 returns 根据 dpr
查询参数以正确的像素密度显示图像。以上似乎不起作用,图像未以正确的尺寸呈现。我使用的格式不正确吗?
您不能在 srcset
属性中混用 x
和 w
描述符。
我不知道 imgix,但我想 ?w=800&h=480&dpr=2
returns 尺寸为 1600x960 像素的图像。 https://myserver.com/image?w=800&h=480&dpr=2 and https://myserver.com/image?w=1600&h=960&dpr=1 是同一张图片吗?
如果图像在每个可见尺寸上始终相同(相同的内容和相同的纵横比),您应该定义您需要的 visible/CSS 尺寸(取决于您的设计,例如 800、1200 和 1600像素)并写下:
<img
src="https://myserver.com/image?w=800&h=400"
srcset="https://myserver.com/image?w=800&h=400 800w,
https://myserver.com/image?w=1200&h=600 1200w,
https://myserver.com/image?w=1600&h=800 1600w,
https://myserver.com/image?w=2000&h=1000 2000w,
https://myserver.com/image?w=2400&h=1200 2400w,
https://myserver.com/image?w=2800&h=1400 2800w,
https://myserver.com/image?w=3200&h=1600 3200w"
sizes="100vw">
浏览器将下载?w=2400&h=1200
图片用于几种配置:
- 视口宽度等于或小于 2400 像素的屏幕密度 1
- 视口宽度等于或小于 1200 像素的屏幕密度 2
- 视口宽度等于或小于 800 像素的屏幕密度 3
- 等等
这是我的 img
标签:
<img src="https://myserver.com/image?w=667&h=375 667w"
srcset="https://myserver.com/image?w=1366&h=1024 1366w 1x,
https://myserver.com/image?w=1366&h=1024&dpr=2 1366w 2x,
https://myserver.com/image?w=1366&h=1024&dpr=3 1366w 3x,
https://myserver.com/image?w=1024&h=768 1024w 1x,
https://myserver.com/image?w=1024&h=768&dpr=2 1024w 2x,
https://myserver.com/image?w=1024&h=768&dpr=3 1024w 3x,
https://myserver.com/image?w=800&h=480 800w 1x,
https://myserver.com/image?w=800&h=480&dpr=2 800w 2x,
https://myserver.com/image?w=800&h=480&dpr=3 800w 3x" sizes="100%">
我正在使用 imgix,它 returns 根据 dpr
查询参数以正确的像素密度显示图像。以上似乎不起作用,图像未以正确的尺寸呈现。我使用的格式不正确吗?
您不能在 srcset
属性中混用 x
和 w
描述符。
我不知道 imgix,但我想 ?w=800&h=480&dpr=2
returns 尺寸为 1600x960 像素的图像。 https://myserver.com/image?w=800&h=480&dpr=2 and https://myserver.com/image?w=1600&h=960&dpr=1 是同一张图片吗?
如果图像在每个可见尺寸上始终相同(相同的内容和相同的纵横比),您应该定义您需要的 visible/CSS 尺寸(取决于您的设计,例如 800、1200 和 1600像素)并写下:
<img
src="https://myserver.com/image?w=800&h=400"
srcset="https://myserver.com/image?w=800&h=400 800w,
https://myserver.com/image?w=1200&h=600 1200w,
https://myserver.com/image?w=1600&h=800 1600w,
https://myserver.com/image?w=2000&h=1000 2000w,
https://myserver.com/image?w=2400&h=1200 2400w,
https://myserver.com/image?w=2800&h=1400 2800w,
https://myserver.com/image?w=3200&h=1600 3200w"
sizes="100vw">
浏览器将下载?w=2400&h=1200
图片用于几种配置:
- 视口宽度等于或小于 2400 像素的屏幕密度 1
- 视口宽度等于或小于 1200 像素的屏幕密度 2
- 视口宽度等于或小于 800 像素的屏幕密度 3
- 等等