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/の公式ポリフィルを使用してください。IE で動作させるにはファンキーなマークアップが必要であり、JS が失敗したりオフになっている場合は画像がまったく表示されないことに注意してください (悲しいことに、それを回避する方法はありません)。

于 2014-08-30T14:32:36.777 に答える