我有2张图片:一个桌面版,一个移动版。 当视口宽度调整到480px以下时,我希望桌面图像被移动图像替换,就像下面带有background-image属性的CSS一样:
.logo { background-image: url(http://placehold.it/400x200&text=desktop); }
media screen and (max-width: 480px) {
.logo { background-image: url(http://placehold.it/300x150&text=mobile); }
}
我以为我可以使用srcset HTML属性来实现这个目的:
<img src="http://placehold.it/400x200&text=desktop" alt="" srcset="http://placehold.it/300x150&text=mobile 480w">
但它不起作用,浏览器一直显示移动图像并在视口大小调整时重新调整它,但我希望这两个图像保持各自的原始大小。
是否可以使用srcset实现此行为?
答案 0 :(得分:2)
听起来你想要做“艺术方向”,即图像不仅仅是较大图像的缩小版本。如果是,则需要使用picture
元素。
<picture>
<source srcset="http://placehold.it/300x150&text=mobile"
media="(max-width: 480px)">
<img src="http://placehold.it/400x200&text=desktop" alt="...">
</picture>
但是,如果您的小图片实际上是较大图片的缩小版本,那么您可以使用srcset
,但是您无法控制选择哪个图像。浏览器根据屏幕密度,网络条件,用户偏好,浏览器缓存等选择最佳的浏览器。
<img src="http://placehold.it/400x200&text=desktop"
srcset="http://placehold.it/400x200&text=desktop 400w,
http://placehold.it/300x150&text=mobile 300w"
sizes="(max-width: 480px) 300px, 400px">
注意:如果使用srcset
并且较大的候选镜头位于缓存中,Chrome将始终显示此缓存的候选图像 - 无论实际视口大小如何。