[英]picture fallback default to png instead of webp
I have this problem here:我这里有这个问题:
<picture>
<source
srcset="/img/logoWebp/ebay.webp" type="image/webp"
/>
<img
alt="ebay"
type="image/png"
src="/img/logoPng/ebay.png"
/>
</picture>
I have readed with this markup the browser should use the webP image but its using the png one.我已经阅读了这个标记,浏览器应该使用 webP 图像,但它使用的是 png 图像。 I am using ofcorse the lastes version of chrome.
我正在使用 ofcorse 的最新版本的 chrome。
Whats the probel here?这里的探针是什么?
The <picture>
element contains two tags: one or more <source>
tags and one <img>
tag. <picture>
元素包含两个标签:一个或多个<source>
标签和一个<img>
标签。
The browser will look for the first <source>
element where the media query matches the current viewport width, and then it will display the proper image (specified in the srcset attribute).浏览器将查找媒体查询与当前视口宽度匹配的第一个
<source>
元素,然后它将显示正确的图像(在 srcset 属性中指定)。 The <img>
element is required as the last child of the <picture>
element, as a fallback option if none of the source tags matches. <img>
元素需要作为<picture>
元素的最后一个子元素,如果没有源标签匹配,则作为后备选项。
Example:例子:
<picture>
<source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width:465px)" srcset="img_white_flower.jpg">
<img src="img_orange_flowers.jpg">
</picture>
When the width is greater than 650px, img_orange_flowers.jpg
is displayed.当宽度大于 650px 时,显示
img_orange_flowers.jpg
。
When the width is less than 650px and greater than 465px, img_pink_flowers.jpg
is displayed.当宽度小于 650px 大于
img_pink_flowers.jpg
时,显示 img_pink_flowers.jpg。
When the width is less than 465px, img_white_flowers.jpg
is displayed.当宽度小于 465px 时,显示
img_white_flowers.jpg
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.