0

我正在尝试在我的代码中实现新的 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>
4

1 回答 1

0

您尝试使用的浏览器很可能还不支持该<picture>元素。但是，它正在 Chrome、Firefox 和 WebKit/Safari 的最新版本中使用。

在得到支持之前，请使用来自http://scottjehl.github.io/picturefill/的官方 polyfill 。请注意，它需要一些时髦的标记才能在 IE 中工作，并且如果 JS 失败或被关闭，则根本不会显示图像（遗憾的是，没有办法解决这个问题）。

于 2014-08-30T14:32:36.777 回答