Css 图片标签/元素显示问题_Css_Html

Css 图片标签/元素显示问题

css html

Css 图片标签/元素显示问题,css,html,Css,Html,我试图在我的代码中实现新的HTML5图片标签，但是，当遵循W3C的元素指南时，它只显示回退图像，而不是调整大小时应该显示的图像我不确定图片容器是否需要CSS样式，以确保在调整大小时图像切换任何帮助都将被感激 <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="Style.css"> </head> <body> <di

我试图在我的代码中实现新的HTML5图片标签，但是，当遵循W3C的元素指南时，它只显示回退图像，而不是调整大小时应该显示的图像

我不确定图片容器是否需要CSS样式，以确保在调整大小时图像切换

任何帮助都将被感激

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="Style.css">
</head>
<body>
<div id="container">
<div id="header">
</div> <!-- end of header -->

<nav>
<ul>

<li id="HomeButton">
<a href="index.html"><img id="HomeText" src="Images/Icons/HomeText.png" /></a>
</li>

<li id="WhatsWhatButton">
<a href="whatswhat.html"><img id="WhatsWhatText" src="Images/Icons/WhatsWhatText.png" /></a>
</li>

<li id="FoodFromPlantsButton">
<a href="foodfromplants.html"><img id="FoodFromPlantsText" src="Images/Icons/FoodFromPlantsText.png" /></a>
</li>

<li id="HowPlantsGrowButton">
<div id="HowPlantsGrowText">
<a href="howplantsgrow.html"><img src="Images/Icons/HowPlantsGrowText.png" /></a>
</div>
<div id="HowPlantsGrowIcon"></div>
</li>

<li id="PlantGameButton">
<a href="plantGame.html"><img id="PlantGameText" src="Images/Icons/PlantGameText.png" /></a>
</li>
</ul>
</nav> <!-- end of nav -->

<div id="page">
<div id="content">

<img class="title" src="Images/Icons/FoodFromPlantsTitle.png" width="250" height="100"/>

<picture alt="angry pirate">
   <source src=Images/Icons/HomeIcon.png media="min-width:800px">
   <source src=Images/Icons/FoodFromPlantsIcon.png media="min-width:480px">
   <source src=Images/Icons/PlantGame.png>
      <!-- fallback for browsers without support -->
      <img src=Images/Icons/WhatsWhatIcon.png alt="angry pirate">
</picture>

</div> <!-- end of content -->
</div> <!-- end of page -->

<footer>
</footer> <!-- end of footer -->
</div>  <!-- end of container -->
</body>
</html>

您尝试使用的浏览器很可能还不支持

元素。然而，在Chrome、Firefox和WebKit/Safari的最新版本中，这一技术正在发展中

在得到支持之前，请使用来自的官方polyfill。

请注意，它需要一些时髦的标记才能在IE中工作，如果JS失败或关闭，它根本不会显示图像（遗憾的是，没有办法解决这个问题）。

picture tag正式发布了吗？一些工作示例您可以添加一个链接到您正在使用的指南吗？我的指南的非官方草案useYup，在该文档中有一个指向一些参考实现的链接，这些实现导致了。我认为演示中使用的就是其中之一。