問題タブ [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.
html - Safari 9 は画像要素を無視します
アートディレクションを実装<picture>し、モバイルでは正方形の画像を表示し、他のすべてのデバイスでは横長の画像を表示しようとしています。何らかの理由で、ここで指定<img>した値を認識できるはずのときに、Safari はタグにフォールバックし続け<source srcset="">ます。
これは chrome で動作するようですが、Safari がこれらの srcset 属性を無視する理由と、Safari 9 で動作させる方法を説明できる人はいますか? ありがとう！
srcset - srcset が画像のサイズを変更するのはなぜですか?
srcset を使用すると奇妙な動作が発生し、理解するのに苦労しています。CodePen を作成しました: http://codepen.io/anon/pen/dYBvNM
問題は、240px、480px、600px、1024px など、さまざまなサイズの (Shopify が生成する) 一連の画像があることです。問題は、それらが最大サイズであることです。つまり、マーチャントがより小さい画像 (たとえば 600 ピクセル) をアップロードすると、1024 ピクセルのバージョンは 1024 ピクセルではなく 600 ピクセルになります。事前にそれを知ることはできないため、すべてのサイズを「最良のケース」として単純に追加する必要があります。
画像が実際に予想される最大サイズよりも小さい場合、奇妙なことが起こります。その場合、ブラウザは適切な画像を正しく選択します (この場合、15 インチの Retina では 1024 バージョンが選択されます) が、画像が実際には 1024px (指定したサイズ) よりも小さいため、ブラウザは実際には、ネイティブ解像度よりも小さくなるように画像のサイズを変更しています。
CodePen http://codepen.io/anon/pen/dYBvNMでこれら 2 つの画像が 1024px バージョンであることを比較できますが、srcset を使用したものでは、レンダリングは実際には src のみの場合よりも小さくなっています。画像がネイティブの解像度のままになると予想していました。
その理由を説明していただけますか？
ありがとう！
wordpress - Wordpress 4.4: media.php の max_srcset_image_width を functions.php から変更
Wordpress は、media.php の新しい srcset 属性に含まれる最大解像度を次の行で定義します。
テーマの functions.php から (フックなどを介して) その値を変更する方法はありますか? 今、私は media.php 自体でそれを変更しました (これはお勧めできません - 私は知っています...)。
html - img が srcset の指定されたサイズに応答しない
こちらで説明されているように、srcset を使用してレスポンシブ画像を実装したかったので、ユーザーがロードする画像 src は、ユーザーの解像度に最も似ています。
問題は、私がこのテストを行ったのですが、ビューポートの変更に反応しないということです。
jsfiddle: http://jsfiddle.net/ad857m1r/9/
私が見逃しているものは何か分かりますか？
javascript - ブラウザのサイズが変更されたときにjQueryを使用して「srcset」画像をリロードするにはどうすればよいですか?
この質問は、次の質問のバリエーションです: Is it possible to recalculate the `srcset` image used if browser window is resized?
基本的に、私のサイトでは複数の画像を含む動的a.class imgスライダーを使用しています。ID ではなく、say でのみ画像をターゲットにできます。さらに、変更する a.class を持つ複数の img があります。
jQuery または通常の JavaScript を使用して、ブラウザー ウィンドウのサイズが変更されたときにブラウザーを新しい srcset に更新するにはどうすればよいですか? できれば、ウィンドウがいくつかのトリガーポイントを超えてサイズ変更された場合にのみ、これを実行したいと思います。たとえば、幅ポイント1170pxと1000pxです。
質問を別の言い方をすると、jQuery を使用して srcset をアート ディレクションのように機能させる方法はありますか? <picture>代わりに要素または代替を使用できません。
したがって、各画像は次のコードでラップされます。
(このコードは複数の面で繰り返されます)
助けてくれてありがとう！
html - Safari は srcset 画像を使用して正しく画像化されていませんか?
このページを参考に見ています
動作させようとしているコードは次のようになります
scrset を使用してさまざまな画像をロードするデモは、Safari 9 では機能しないようですが、Chrome では正常に機能します。サファリと iOS は、サファリ 9 と iOS サファリ 8 以降、scrset 属性を実装したという印象を受けました。
現在、Safari 9 は specto1-old.png をロードしていますが、chrome は specter1@1.png をロードしています。
デモがクロムで機能するのにサファリでは機能しない理由を誰かが説明できますか?
編集: Idk どうやってタイトルをひどく解体したか. 「srcset と pictures タグを使用して safari が画像を正しく表示していませんか?」