問題タブ [picturefill]

1 つは 1000 x 800 ピクセル (「大」) で、もう 1 つは 200 x 200 ピクセル (「小」) です。srcset / sizes / picturefillを使用して、画面の幅が 500 CSS ピクセル以下の場合は小さな画像を表示し、それ以外の場合は大きな画像を表示したいと考えています。

ここにストローマンの提案があります: http://jsfiddle.net/ghhjfo4z/1/embedded/result/

これは、私の 1x ピクセル密度ディスプレイでは問題なく動作します。しかし、2x ピクセル密度の Retina ディスプレイに切り替えると、突然、ビューポートの幅が 250 CSS ピクセル以下の場合にのみ小さな画像が表示されます。

ビューポートが 500px 以下の場合に、2 倍のピクセル密度のディスプレイでブラウザーに小さな画像を使用させる方法はありますか?

基本的に、デバイスのピクセル密度を無視し、srcsetやサイズを使用して、ビューポートの CSS ピクセル幅に基づいて画像のみを選択したいと考えています。

画像要素のレンダリングされた画像を再利用する必要があります。ピクチャフィルが完了するロジックを複製することなく、javascriptを使用してchrome/operaによってレンダリングされた画像ファイルパスにアクセスする直接的な方法はありますか?

上記の例を使用すると、幅が 1200px の Retina デスクトップ ブラウザー ウィンドウで、画像をサポートするブラウザーは head-2x.jpg をレンダリングします。または、幅 450px 未満の Retina ディスプレイのスマートフォンで chrome ブラウザーを使用している場合、head-fb-2x.jpg を使用します。この動的にレンダリングされた画像に直接アクセスするにはどうすればよいですか?

ソース要素を自分で解析せずに、このレンダリングされた画像にアクセスする方法はありますか?

ポリマーを使用して作成しているWebコンポーネント内で、 picturefill jsライブラリ<picture>によって作成された要素を使用しようとしていますが、コンテナ要素から寸法を取得していないため、可能な限り最小の画像を選択しています。<picture>

コンテナーが 100% であることを確認するなど、スタイリングでこれを行うための無数の試みの中で、:host に display:block を与えようとしましたが、何も機能しません。

これは、最小の画像を使用してポリマー製の要素を表示し、次に正しい画像を表示する独自の要素を表示する、私がやろうとしていることのコードペンです。<picture>

ライブ codepen バージョンでは<hr>、ポリマー要素によって作成された (水平ルール) 要素が全幅であるため、コンテナーの正しい幅を理解することに注意してください。

これはコードペンのコードです:

```

```

これに関するヘルプは大歓迎です。

ありがとう、スコット

当サイトでは現在、Picturefill (バージョン 2.2.0) を実装しています。画像要素は次のようになります。

ご覧のとおり、通常のメディア クエリとピクセル比率を考慮すると、複雑なメディア クエリを含む 1 つの画像に対して 5 つのソースがあります。このようなクエリは次のようになります。

サイトに 10 枚の写真がある場合、10 X 5 = 50 の複雑な RegEx 計算。

ご意見をお聞かせいただければ幸いです... ;)

よろしくお願いします...

次のlaravelコードがあります。

私がやろうとしているのは、幅 < 600px の場合は 600x600 の画像を表示し、幅 > 600px の場合は 410x620 の画像を表示することです。

上記のコードはデスクトップで動作します。ただし、iPhone (iOS 8.1.2、safari/chrome) では、代わりに 410x620 の画像が表示されます。IE9 - IE11 を除き、Picturefillが含まれていなくても (デスクトップとモバイルの両方で) 適切に動作します。

私がここに欠けているものはありますか？

解決策:

レスポンシブ イメージで Bootstrap を使用しています。ブラウザに複数の画像サイズを提供することで、読み込み時間を最適化したいと考えています。この記事によると、このような srcset を使用した単純なアプローチは、ブラウザーに最適な画像サイズを選択させるのに適しています。

私の問題は、これを Bootstrap img-responsiveクラスと組み合わせると、小さいサイズの画像だけが必要な場合でも大きなサイズの画像が読み込まれることです。

ここでのコード例: Bootply . テストには Chrome を使用してください。Chrome には srcset サポートのサポートが組み込まれています。(他の一部のブラウザでは、picturefill.js を認識する必要があります。)

画像のソースをコピーすると (または [ネットワーク] タブの Chrome 開発者ツールを見ると)、幅 750 のバージョンが読み込まれ、小さな画像にサイズ変更されていることがわかります。使用する。(picturefill JS が img srcset をサポートするためにロードされている場合、IE と Firefox でも同じことが起こります。)

私は何を間違っていますか？

現在、レスポンシブな背景画像を JavaScript で設定するためのソリューションの構築に取り組んでいます。クロス ブラウザー サポートを作成するために、Picturefill を使用しています。

私が必要なものは何？私のページには、かなり小さな背景写真が必要な要素があります。ページには、条件付きで画像をロードする画像要素があります。ただし、ブラウザが適切な画像要素をサポートしていない場合は、デフォルトの画像ソースを 1 つ指定しました。

MooTools を使用して、どの写真が domready に表示されるかを確認し、ウィンドウのサイズ変更時に、イメージの 'src' をもう一度チェックして、必要に応じて現在の写真を (大きいまたは小さいものに) 置き換えます。

FireFox では、picture 要素が DOM の画像 'src' を置き換えます。これは完璧に機能します!

Chrome (および IE) は画像の 'src' を置き換えないため、私の写真は常に MooTools によるデフォルトの写真の寸法になります。ただし、Chrome デベロッパー ツールを使用して画像「src」にカーソルを合わせると、そのメディア クエリの正しい画像ソースが表示されます。

あまりにも多くの詳細を得ることができますが、私は本当に上記のようにそれを行う必要があると信じています. 誰がこれを手伝ってくれますか? :)

可能な解決策をありがとう、私はとても感謝しています!

乾杯、ステファン

新しい画像タグを使用して、画像のレスポンシブ バージョンを作成しようとしています。

何らかの理由で、ブラウザの幅に関係なく、画像の幅が数式に設定されているため、フォールバックのみが実行されます。

クロスブラウザーの互換性を有効にするために、picturefill を使用しています。問題がある場合、これはクラス「col-md-6 col-lg-7」のブートストラップ 3 列の一部です。ロジックのどこにエラーがありますか?