size
需要使用srcset
吗?我有一个网站,除了一个50px的电路板外,还有一个非常全屏的大图像。该图像剂量的比例需要根据不同的屏幕比例/大小而改变。
目前我只使用srcset
这样:
<img
src="bath.jpg"
srcset="bath-large.jpg 1500w, bath-medium.jpg 1000w, bath-small.jpg 600w"
alt="#"
>
这个问题是,如果桌面上的用户在压缩浏览器中打开网站(因此将加载小图像)然后使他们的浏览器窗口变大,小图像将被缩放以便它将现在是像素化的。 (如果他们刷新了页面,他们现在可以获得大图像或中图像,但我怀疑任何人都会在每次调整浏览器窗口大小后刷新页面)
使用size
属性然后尝试重新计算在调整浏览器窗口大小时使用哪个图像?如果不是size
属性的用例是什么?
答案 0 :(得分:4)
sizes
- 属性(注意s)可以帮助浏览器决定加载哪个分辨率。在选择分辨率时,CSS可能尚未呈现,因此我们需要复制此信息。
它向浏览器声明图像在布局中将具有哪个空间。它默认为"100vw"
,这意味着“视口的宽度”,这是一个理智的默认值,因为图像可能不会显示大于那个,所以在最坏的情况下,加载的图像分辨率太大(好于太小)。
sizes
- 属性因此在使用不包含整个视口宽度的图像的流体布局时很有意义,可能取决于断点。例如,sizes="(min-width: 900px) 33.3vw, 100vw"
表示当浏览器视口大于900px(或450px和2dpi-Retina-Screen等)时,图像采用3列布局。
您可以找到一篇关于数学详情here的精彩文章。
在你的情况下,sizes
没有帮助(虽然你可以写sizes="calc(100vw - 100px)"
。重新下载更大的分辨率是浏览器需要决定的,这个可能会被每个浏览器以不同的方式实现。目前Chrome可以实现(但不会反过来,只要下载高分辨率,较低的分辨率将被忽略为“不必要”)。
答案 1 :(得分:0)
您在srcset中指定的大小适用于图像响应的情况,换句话说,当图像没有固定时。
如果调整图像大小,支持srcset的浏览器将尝试从srcset中找到最适合的源图像。