响应图像

Question

我有以下

 <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">

Answer 1

你可以做到这一点与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/。