2

HTML5 要素に問題がありますpicture。最大幅 600px のデバイス用に小さい画像を表示したいと思います。他のデバイスは全体像を把握する必要があります。

<picture alt="logo"> 
     <source src="img/b2b-logo-small.png" media="max-width: 600px">
     <source src="img/b2b-logo.png" >            
     <img class="logo" src="img/b2b-logo.png" /> <!-- Fallback -->
</picture>

imgChrome は常にタグ (フォールバック)から画像を表示するため、ブラウザー ウィンドウの幅を縮小しても何も起こりません。なんで？

4

4 に答える 4

6

ピクチャ要素は、まだどのブラウザーでもサポートされていません。まだ提案にすぎません。ブラウザが をサポートしていないときはいつでもそのフォールバックにヒットするので、それをサポートする Chromium ビルド<picture>などがある場合にのみ、そうでない可能性があります。

<picture>JS ポリフィルの使用に問題がなければ、レスポンシブ イメージを実装する方法で引き続き使用できます。を推進している Responsive Images Community Group のメンバーの 1 人である Scott Jehl は、picturefill を書き<picture>ました。

HTML タグを使用する代わりに、データ属性を使用するため、コードを少し異なる方法で記述する必要があります。ピクチャフィル ドキュメントの例:

<span data-picture data-alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
        <span data-src="small.jpg"></span>
        <span data-src="medium.jpg"     data-media="(min-width: 400px)"></span>
        <span data-src="large.jpg"      data-media="(min-width: 800px)"></span>
        <span data-src="extralarge.jpg" data-media="(min-width: 1000px)"></span>

        <!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
        <noscript>
            <img src="external/imgs/small.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
        </noscript>
    </span>
于 2013-09-06T19:03:37.817 に答える
3

2014 年 11 月の時点で、Chrome 39 がpictureリリースされ、バージョン 38 以降のタグがサポートされている場合、コードの問題は、ブラウザーがタグ内の属性をsrc="img/b2b-logo-small.png"サポートしていないためです。である必要があります。srcsourcesrcset="img/b2b-logo-small.png"

詳しくはスペックをご覧ください。

また、 picturePolyfillもチェックしてください。これは完全ではありませんが、picturefill よりもはるかに高速です。

于 2014-11-21T11:40:40.600 に答える
1

これは、公式の W3C HTML5 仕様に属しておらず (要素のリストには含まれていません)、変更される可能性があるため、最新のブラウザーでもまだサポートされていません。

于 2013-09-06T19:03:23.993 に答える
0

探している各サイズの周りにいくつかのメディア クエリを作成し、各サイズで ID を使用して、メディア クエリから画像を表示および非表示にすることができます。

于 2013-09-06T19:09:47.357 に答える