問題タブ [srcset]

誰かが光を当てることができることを願っています-ビューポートの幅ではなく、ユーザーの操作によって切り替えられる固定の列幅を持つ同位体アイテムがあります。

固定画像幅は 105px、160px、333px、1200px です。

画像の srcsets を使用して、ビューポートではなく画像の幅に基づいてソースを更新したいと考えています。現在、これをトリガーする方法があるかどうか、または代わりに JavaScript を介してこれを行う必要があるかどうかを確認するのが難しいと感じています。

ビューポートに関しては画像のsrcsetsが正常に機能していますが、列が105pxのみで、その幅の5〜12列が画面に収まる場合、ビューポートの幅が原因で1200px幅の画像が読み込まれますが、これは機能ではありません望んでいる、提供していない、そして私が望む貯蓄について。

私は上下に検索しましたが、正しい方向に私を向けるための多くを実際に見つけることができません. どんな助けでも大歓迎です。

私は新しいレスポンシブ Web サイトのデザインに取り組んでおり、ブラウザーのビューポートが 768px 以上の場合、幅が 4 列に及ぶ画像のグリッドを含むギャラリーがあります (したがって、各画像はビューポートの約 25% です)。767px 以下のものは、幅が 1 列しかありません (解像度が低い場合は全幅になります)。

• デスクトップ サイズ (768 ピクセル以上) の画像は、幅 220 ピクセル (画像 4 列) にする必要があります。
• 480px から 767px の間は、最大 420px の幅 (1 列の画像) にする必要があります。
• また、モバイル サイズ (479 ピクセル未満) は幅 260 ピクセル (1 列の画像) までにする必要があります。

画像ごとに 3 つのソースがあります。220px、260px、420px。

上記からわかるように、サイズは、ビューポートが小さいほど画像が小さいという通常の規則に従っていないため、さまざまなオプションを調査して試しています.

提案に従って、私は Google Chrome をシークレット モードで使用しており、Internet Explorer のプライベート ブラウジングも行っています。ブラウザのビューポートは、ページをロードする前に小さく開始するなどして、行った変更が確実に更新されるようにしています。

私がたどり着いた現在のコードは、それを機能させるのに最も近いものであり、スタックオーバーフローに関する誰かのクエリ（私のものと同様）への回答に従っています。ただし、それを実装しようとすると、ブラウザに適切な画像をロードさせることができないようです。常に、より大きな 420px 幅の画像がロードされます。

私のコードは現在次のようになっています:

私が主題に取り組んでいる間の2番目のクエリ。私のシナリオでは、デフォルトの img src を 260px の画像に設定するのが最善でしょうか? これは、srcset が理解されず、中間サイズのビューポート (460-767px) のみが影響を受ける場合に、デスクトップ ブラウザーとモバイル ブラウザーの両方をカバーするためです。それとも、デフォルトの画像を最小サイズに設定するのが常に最善ですか?

任意の提案をいただければ幸いです、ありがとうございます。

- 編集 -

簡単な更新ですが、昨日論理的に理解したと思っていましたが、うまくいかなかったので、計算の概念全体をまだ理解しているかどうかわかりません。私の最新の編集は次のようになります。

だから私の考えでは、私がリストしたサイズのセクションには状態があると思います...ビューポートが少なくとも460pxの場合は420pxの画像を使用し、ビューポートが少なくとも768pxの場合は260pxの画像を使用します。最後の 100vm は、それ以外の場合はビューポート幅全体で最適なものを使用することを意味します。何かが認識されなかった場合、これはほとんどのビューポート サイズに適合するため、デフォルト ファイルを 260px ファイルに修正しました。

ただし、上記の編集ではまだ 420px の画像のみが読み込まれます。

どんな提案でも大歓迎です。たとえそれが私の論理を修正するためだけであっても！

ウィンドウの幅に応じて最適なものを選択するために、さまざまなサイズのさまざまな画像をブラウザーに提供する方法を学んでいますが、画面のサイズに関係なく、ブラウザーは常に大きなサイズの画像をダウンロードすることが常にわかりますは。たとえば 400px のウィンドウ サイズの場合、ブラウザは小さいサイズの画像、中サイズのサイズ、および大きいサイズの画像をダウンロードします。次の URL で私が所有するライブ サーバーにサンプルをアップロードしました。何が起こっているのかを理解するためにあなたの助けが必要です。

編集（これは簡単な例です）

Bootstrap メディア オブジェクトを使用していますが、s を使用すると壊れているようですsrcset。

はmedia-body右にオフセットされてoverflow: hidden見えません。

srcset開発ツールで属性を削除すると、問題が修正されます。以下のスクリーンショットの作業オブジェクトは を使用していませんsrcset。

壊れた

予想される（最後の入浴は無視してください）

html5 img 属性が正しく機能しない理由を理解するのに問題がありますか? このチャンクにsrcsetをセットして、画面幅320pxだとimage-xs.jpgになるのですが、ブラウザにimage-md.jpgが表示されてしまうのは、画像の読み込みによるものだと思います。それはバグですか、それとも私は何かを理解していませんか？説明してください。内部のタグの画像と img については説明しません。どうして img が具体的に機能するのでしょうか。

以下のコードで、解像度が約 400px のときにブラウザーが大きな画像と小さな画像を読み込んでいる理由を理解しようとしています。解像度が小さい場合は、小さい画像をロードするだけですよね? Retina ディスプレイでも、中程度の画像をロードする必要があります。

ここ数時間、私はこれについて勉強しようと試みてきました。

JSFiddle へのリンク: https://jsfiddle.net/italoborges/v8yftgj2/2/

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

ありがとう。

流動的なレイアウトで srcset と組み合わせて lazysizes プラグインを使用しています。スクロール時にページを拡張するのではなく、ブラウザーにページを正しい長さでロードさせる方法がわかりません。

ここでデモを行うために、ブートストラップ フレームワークを使用して codepen を作成しました。

http://codepen.io/elevenelevne/pen/EKbERV

よく読んだ後、ブラウザが設定されていないため高さを計算できないことが原因であると確信していますが、レスポンシブな方法で動作させることはできません

コードですが、たとえば10行あります

どんな助けでもありがたく受け入れられます