响应图像
我有以下响应图像
<img
src="/img/footer/logo_white.png?v=2.0"
srcset="/img/footer/logo_white.png?v=2.0 1x,
/img/footer/logo_white2x.png?v=2.0 2x"
>
其工作正常和hiDPI屏幕精细不受Safari浏览器的iOS尊重。
但是,当视口的非常小(400px以下)的标志不适合,因此我需要一个较小版本的图像根据我创建的实际长度。然后我试图
<img
class="biw-logo"
sizes="(max-width: 390px) 110px, 175px"
src="/img/footer/biw_logo.png?v=2.0"
srcset="/img/footer/biw_logo_small.png?v=2.0 110w,
/img/footer/biw_logo.png?v=2.0 175w,
/img/footer/biw_logo2x.png?v=2.0 350w"
>
中表示视口超过390个像素低_small形象方面其中一期工程 - 但现在我已经失去了“高清晰度”的因素;我无法强制iphone5s中的iOS浏览器使用上述语法显示长度为110px的220px图像。
你能纠正我的语法吗?
<img class="biw-logo" sizes="(max-width: 390px) 110px, 175px" src="http://placehold.it/175x75" srcset="http://placehold.it/110x50 110w,
http://placehold.it/175x75 175w, http://placehold.it/350x150 350w">
你可以做到这一点与srcset
和sizes
。首先告诉你有可用的图象的浏览器,以及有多少个像素宽这些图片,这可以用srcset
做到:
<img srcset="
/img/footer/logo_white.png?v=2.0 300w,
/img/footer/logo_white2x.png?v=2.0 600w,
/img/footer/logo_white_small.png?v=2.0 150w
">
现在浏览器知道它可以从150,300和600三个图像选择像素宽(我猜的尺寸,你的实际宽度可能会不同)。
其次,你告诉浏览器如何大的图像将在网页上显示,这可以用sizes
实现:
<img
sizes="(max-width: 400px) 150px, 300px"
srcset="..."
>
现在的浏览器都知道,如果视口的宽度为400像素或减少图像将显示150px宽,对于大于400px的视口它显示300px宽。
这是浏览器选择正确图像的足够信息。在正常屏幕的普通桌面上,它将选择300w
-image,在HiDPI桌面上它将是600w
。在一个正常屏幕的小视口150w
将被选中,并在一个小视口与HiDPI的300w
之一。
如果您想了解更多关于srcset
和sizes
的信息,请查看http://ericportis.com/posts/2014/srcset-sizes/。
哎@ausi谢谢:)魔鬼在细节:)所以我: - 一个宽150图像显示在非视网膜,对hiDpi(视网膜)显示的300像素(2个)的图像,但仍呈现为宽度为150px,需要多少空间 - 对于小于450px的视口,其视图面积应小于80px(但其实际上只有160px文件,因为它只是视网膜)。 –
然后,您的“sizes”属性应显示像'sizes =“(max-width:450px)80px,150px”'和'srcset'中的'... w'部分应该反映图像的宽度。 – ausi
谢谢@ausi:不幸的是我仍然无法获得语法..我设置'sizes =“(max-width:450px)80px,150px”',但我无法获取要显示的_small.png图像尽可能大。本质上,我没有得到图像旁边'尺寸'与'* w'描述符的关系。 (我得到倍和2倍),但是当尺寸和'w'进入游戏,我失去它:) –
您使用哪个iOS版本测试图片标记?您至少需要iOS 9才能使'w'描述符正常工作。您可以在这里找到有关浏览器支持的详细信息:http://caniuse.com/#feat=srcset – ausi
解决了部分问题。我正在使用8.x模拟器进行测试..任何回退或解决方法? –
好吧,所以我添加了一个110w作为第一个标志,它被8.x拾取,(如果它不了解'w'描述符,我猜它是基于顺序的),其余的工作正常。 –