图片标签/元素显示问题

我试图将新的HTML5图片标签实现到我的代码中，但是，当遵循W3C的元素指南时，它仅显示后备图像，而不是调整大小时的图像。图片标签/元素显示问题

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

任何帮助将appriciated！

<!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>

来源

2013-04-04 WibblyWobbly

图片标签甚至官方没有？ – Zendy 2013-04-04 00:50:47

http://responsiveimages.org/demos/ 一些工作示例 – WibblyWobbly 2013-04-04 00:52:10

您是否会添加指向您正在使用的指南的链接？ – frozenkoi 2013-04-04 00:53:01

的<picture>元素是最有可能不是你想它在浏览器中被支持。它是，但是，在它的途中在最新的构建器是Chrome，Firefox和WebKit的/ Safari浏览器。

直到它被支持，使用从http://scottjehl.github.io/picturefill/官方polyfill。请注意，它需要一些时髦的标记工作在IE浏览器，并没有显示图像根本没有JS失败或关闭（没有办法，很伤心）。

来源

2014-08-30 14:32:36 Emil

图片标签/元素显示问题

回答

相关问题