Question

我正在尝试将新的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>

Answer 1

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

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

图片标签/元素显示问题

1 个答案: