Проблемы с отображением тегов/элементов

Я пытаюсь внедрить новый тег 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>

источник

2013-04-04 WibblyWobbly

Показывает ли еще тег изображения еще официально? – Zendy

http://responsiveimages.org/demos/ Некоторые рабочие примеры – WibblyWobbly

Добавили ли вы ссылку на руководство, которое используете? – frozenkoi

<picture> элемент, скорее всего, не поддерживается в браузерах, которые вы пытаетесь его. Это, однако, на пути в последних сборках как Chrome, Firefox и WebKit/Safari.

Пока не поддерживается, используйте официальный полиполк от http://scottjehl.github.io/picturefill/. Обратите внимание, что для работы в IE требуется некоторая фанковая разметка и вообще не отображает изображение, если JS не работает или выключен (это не так, к сожалению).

источник

2014-08-30 14:32:36 Emil

Проблемы с отображением тегов/элементов

ответ

Смежные вопросы