实现HTML <picture>标记以支持WEBP，如何正确处理最大宽度

Question

我对切换到HTML标记很感兴趣，这样可以同时支持WEBP和JPEG，然而，我遇到了有关最大宽度属性的令人困惑的行为。

test.jpg和test.webp都是640x480

原始代码(没有标记，没有WEBP):

<img src="test.jpg" style="max-width:80%">

结果:一切正常工作，如果浏览器宽度缩小，图像呈现为640x480或缩小。

坏代码#1:

<picture>
    <source srcset="test.webp" type="image/webp">
    <source srcset="test.jpg" type="image/jpeg">
    <img src="test.jpg" style="max-width:80%">
</picture>

结果:即使浏览器宽度不受限制，图像也会缩小到512x384 (640x480的80%)。

坏代码#2:

<picture style="max-width:80%">
    <source srcset="test.webp" type="image/webp">
    <source srcset="test.jpg" type="image/jpeg">
    <img src="test.jpg" style="">
</picture>

结果:图像以正确的大小呈现，但如果浏览器窗口缩小，则不会缩小。

坏代码#3:

<picture style="max-width:80%">
    <source srcset="test.webp" type="image/webp">
    <source srcset="test.jpg" type="image/jpeg">
    <img src="test.jpg" style="max-width:80%">
</picture>

结果:与#1相同(图像呈现为512x384，而不是640x480)

体面代码：

<picture style="max-width:80%">
    <source srcset="test.webp" type="image/webp">
    <source srcset="test.jpg" type="image/jpeg">
    <img src="test.jpg" style="max-width:100%">
</picture>

结果:在现代浏览器中，这似乎是正确的，但我担心，在不支持标记的旧浏览器中，图像将缩小到100%，而不是80%

我也尝试过在图片标签和/或img标签中添加"width=640px“，但这似乎没有多大区别。

Answer 1

下面是我找到的最好的解决方案：

1. 将标签上的最大宽度设置为90% (或您希望它是什么)

。

1. 将标签上的宽度设置为图像的实际大小，除非您希望它总是缩放

1. 将图片标签的最大宽度设置为100%

1. 将图片标签的宽度设置为等于或大于img标签的宽度除以最大宽度的数字。例如，img标签的宽度= 640 max-宽度= 90%，640/0.9 =711.111.我将图片标签的宽度设置为720只是为了使用一个更偶数，只要它更大的

就不重要了。

<picture style="max-width:100%;width:720px">
    <source srcset="test.webp" type="image/webp">
    <source srcset="test.jpg" type="image/jpeg">
    <img src="test.jpg" style="max-width:90%;width:640px">
</picture>