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屏幕上工作正常。

但是当视口非常小（低于400像素）时，徽标不合适，因此我需要一个较小版本的图像的实际长度，这是我创建的。然后我试了

            <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 图像有效 - 但现在我已经失去了＆＃34;高分辨率＆＃34;因子;我不能强迫iphone5s中的iOS浏览器使用上述语法显示长度为110px的220px图像。

你能纠正我的语法吗？

＆＃13;

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

＆＃13;

Answer 1

您可以使用public String getName()和srcset执行此操作。首先告诉浏览器您可以使用哪些图像以及这些图像有多少像素宽，这可以通过sizes完成：

srcset

现在浏览器知道它可以从三个150,300和600像素宽的图像中进行选择（我猜测尺寸，你的实际宽度可能会有所不同）。

其次，您告诉浏览器图片在网页中的显示大小，这可以通过<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 ">来实现：

sizes

浏览器现在知道，如果视口的宽度为400px或更小，则图像将显示为150px宽，对于大于400px的视口，它将显示为300px宽。

这是浏览器选择正确图像的足够信息。在普通屏幕的普通桌面上，它将选择<img sizes="(max-width: 400px) 150px, 300px" srcset="..." > - 图像，在HiDPI桌面上，它将是300w。在具有普通屏幕的小视口上，600w将被选中，并且在具有Hi 150w的HiDPI的小视口上。

如果您想了解有关300w和srcset的更多信息，请查看http://ericportis.com/posts/2014/srcset-sizes/。

Answer 2

您也可以尝试使用另外source这样的：

<picture>
    <source srcset="img.png"    media="(resolution: 150dpi)" type="image/png" />
    <source srcset="img2x.png"  media="(resolution: 300dpi)" type="image/png" />
    <img src="img.png" alt="alt text" />
</picture>

或者类似的东西-我没有对其进行测试，因此我需要进一步了解resolution媒体查询。

使用srcset / sizes的响应式图像不受Safari iOS的尊重

2 个答案: