問題タブ [srcset]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票する
2 に答える
1964 参照

php - wordpressでthe_post_thumbnail関数を変更するには?

まず第一に:それは可能ですか?

<img>wordpress レイアウトをレスポンシブにするためにsrcset タグを返す関数を取得したいと思います。私のラッパーは幅が 1400 で、1400 @1 または 700 @2 より広い画面には適していますが、携帯電話では幅が広すぎて、@2 や @3 画面でも 720px 幅で十分なので、これは私にとって重要です (鋭くなる可能性がありますが、目はあまり気付かないためです)。

問題は、php の処理中に提供するサムネイル サイズがわからないことsrcsetです。そのためには、に何かを書かなければならないことを私は知っていfunctions.phpます。しかし、私は何をどのようにすべきですか?the_post_thumbnail()関数を変更する必要がありますか? それとも新しく作るべきですか?その場合、投稿のサムネイルの異なるサイズから異なる画像名を取得するにはどうすればよいですか?

0 投票する
2 に答える
1056 参照

css - 縦向きのCSS img srcsetメディアクエリ

横向き用と縦向き用の 2 つの画像があります。

を使用する<picture>と、標準のメディア クエリを使用できますが<picture>、Safari ではサポートされていないため、使用したいと考えています<img srcset>。のデバイスの縦向きに対処する方法に関する情報が見つかりませんsrcset

何か助けはありますか?

0 投票する
2 に答える
1089 参照

angularjs - ng-srcset イメージが最初は IE11 で断続的に表示されない

ページは IE11 でのみ表示される画像なしで読み込まれますが、断続的にブラウザーのサイズを変更すると、それに応じて更新されます (1/3 読み込み)。これを他のブラウザで再現することはできません。srcset は、静的コンテンツに対して単独で正常に動作します。

これは、IE11 で動作しないPlunker の例です。

または、すばやく簡単に、使用している実際の img html:

画像または周囲の div には、トランジション、シャドウ、または不透明度が適用されていません。

html は、角度を渡して srcset 属性を正しく書き換えることで正常にレンダリングされます。画像は表示されず、alt タグのみが表示されます。これが断続的なコールスタックの問題である可能性があるかどうか疑問に思っています.Angularがダイジェストなどを終了する前に、Picturefillのロードと競合状態になる可能性があります.

事前に乾杯!

0 投票する
1 に答える
162 参照

html - Chrome の srcset は常にリストの最初の画像を表示します

初めて srcset を試してみましたが、Chrome を除くすべてのブラウザで期待どおりに動作しているようです。Chrome は常に srcset リストの最初にある画像を選択します。私が使用しているコードは以下のとおりです。

したがって、この例では、Chrome は常に 1800 の画像を選択しますが、480 が最初になるように順序を変更すると、これが選択されます。何か案は?img の設定に何か問題がありますか?

前もって感謝します

0 投票する
1 に答える
526 参照

iphone - srcset が iPhone で動作しない

私は自分のプロジェクトでsrcsetを使用しています.iPhoneでテストするまではすべてうまくいきますが、srcsetは突然機能しません.ここに私のコードがあります:

ピクセル密度についていくつかの規則があることは知っていますが、iPhone のポートレート (320px、avec retina 640px) では、読み込まれる画像は 1920px であり、768px ではありません。

(iPhone 5でテスト済み)

0 投票する
0 に答える
1880 参照

javascript - イメージの srcset および src 属性を動的に設定すると、1 つの要求がトリガーされすぎます

と属性<img>の両方が動的に設定される遅延読み込みソリューションを使用します。srcsrcset

画像のsrcsrcset属性の両方が既に HTML (従来) に存在する場合、srcset 対応ブラウザは を安全に無視srcし、srcset リストから選択された 1 つのリクエストのみをトリガーします。(この男はそれが機能すると言っていますが、HTML からトリガーされる 2 つのリクエストは、実際には最近までChrome のバグでした。)

src最初は空です。JavaScript では、srcsrcset属性の両方が属性の値に設定されdata-ます。

ここで、html で属性が既に設定されている場合とは異なり、両方の属性を設定すると 2 つのリクエストがトリガーされます。これは、最初に設定された属性に適用されます。src設定前に設定srcsetすると、すでに 1 つの要求が発生することは理解できます。

私が望むのは、後で設定され、他のブラウザのフォールバックとして意図されている属性srcsetを無視しながら、設定してから srcset 対応のブラウザに一致を見つけさせることです。src

srcset + フォールバックを遅延読み込みした経験のある人はいますか?

0 投票する
1 に答える
33 参照

html - Galaxy S6 の Chrome 45 が srcSet 属性に基づいて正しい img を選択しない

デスクトップの Chrome 46 は、ブラウザーのサイズをさまざまな幅に変更すると、適切な画像を読み込みます。ただし、私の電話では最大の画像が読み込まれます。1024wのもの。電話でhttp://html5test.com/にアクセスすると、サポートされていると表示されます。モバイルで正しく動作していないことを誰かが確認できますか?