問題タブ [responsive-images]

私が維持しているサイトでは、アニメーションの場合は .gif のみが表示され、アニメーション以外の画像はすべて .png または .jpg で 100% 表示されます。

Wordpress がレスポンシブ表示用に画像のサイズを自動的に変更するときに、Wordpress が .gif のサイズを変更するのをブロックするために使用できるフックはありますか?

私はWordpress 4.4.1を使用しています。

<img srcset=".." sizes=".."/>レスポンシブ画像のhtmlタグ+属性についての質問です。

• 3x Retina ディスプレイ (3 * 341 = 1023) では、srcset の w-descriptor はデバイス ピクセル (1023px) またはレイアウト/CSS ピクセル (341px) を参照しますか?
  編集: 明らかに、w-descriptor は画像解像度を指定します。これは、デバイス ピクセルまたは css ピクセルとは関係ありません。
  しかし問題は、提供された画像の 1 つをブラウザーがどのように選択するのかということです。デバイスのピクセルに基づいていますか、それとも css ピクセルに基づいていますか?
• サイズ属性のメディア クエリは、デバイス ピクセルまたはレイアウト ピクセルを参照していますか?
• サイズ属性の画像幅 px は、デバイス ピクセルまたはレイアウト ピクセルを参照していますか?

私自身の推測では、サイズは常にレイアウト ピクセルを指します。しかし、これが確認できれば望ましいです。

(理想的には、デバイスのピクセル密度に応じて異なる jpg 品質を提供したいと考えています。Retina = 低品質、高解像度。しかし、これはおそらく別の質問です)

完全なシナリオはこちら: Responsive img/srcset/sizes: デバイスのピクセル密度によって jpg の品質が異なりますか?

編集:「デバイス ピクセル」と言うとき、実際にはデバイス上の物理ピクセルを意味します。

デバイスのピクセル密度に基づいてさまざまな jpg 品質を提供できるレスポンシブ イメージ戦略を探しています。

高解像度の小さな画面では、低品質ですが高解像度の jpg を提供します。ピクセル密度の低い大画面では、理想的にはデバイスの解像度に一致する高品質の jpg を提供します。

質問:
これはどうにかして可能<img srcset=".." sizes=".." />ですか?

背景・シナリオ

• 元のサイズが異なる別の元の画像。
• さまざまな画像表示コンテキスト: ギャラリーのサムネイルとして、ブログ投稿に埋め込まれ、モーダル ボックスに、全画面表示として..
• これらの画像の表示サイズを変更するメディア クエリを使用したレスポンシブ レイアウト。必ずしも比例するわけではありません。
  たとえば、デスクトップで 100 ピクセルのサムネイルとして表示されるものは、モバイルでは全幅で表示される場合があります。
• 解像度乗数を備えた高解像度または「Retina」デバイス。これらでは、多くのピクセルが必要ですが、ファイルサイズは小さくなります。

私が検討している解決策

これに対する有望なアプローチは<img srcset=".." sizes=".."/>.

ただし、x-descriptor と w-descriptor を組み合わせる必要があるかどうか、またはどのように組み合わせる必要があるかは疑問です。

x-descriptor は相対的なサイズを指定します。しかし、何に対して？の元の画像サイズとレイアウト幅の両方が、<img>コンテキスト間およびビューポート間で異なる場合があります。ビューポートはメディア クエリの幅を報告しますが、Retina ディスプレイのおかげで、実際のピクセル幅は報告されたビューポート幅の 2 倍または 3 倍になる場合があります。

w-descriptor は絶対サイズを指定します。これは、デスクトップではサムネイル サイズ、モバイルでは全幅のイメージ コンテキスト (またはその逆) の場合に適しています。

質問・関連

デバイスのピクセル密度に応じて異なる jpg 品質を提供するにはどうすればよいですか? （上記の質問）

関連する質問: srcset とサイズはデバイス ピクセルまたはレイアウト ピクセルを参照しますか?

ウェブサイトを作ろうとしていますが、いくつか問題があります。

これは私が達成しようとしているものです:

フォトショップ画像

そして、これは私がこれまでに持っているものです

実際の画像

私が現在直面している問題は次のとおりです。

1. ナビゲーション バーの下の空白を取り除くことができません。ナビゲーションとウィンドウの残りの部分のマージンとパディングを削除しましたが、機能しません。

2. 最初の画像のように、テキストを中央に垂直に正しく配置できません。行の高さとパディングを使用してみましたが、ブラウザ ウィンドウのサイズを縦方向に変更すると、テキストがサイズに反応しません。ブラウザウィンドウのサイズに関係なく、真ん中にとどまりたい.

3. ウィンドウのサイズに合わせて背景画像を取得する最良の方法は何ですか? 現在私が使用している

   幅:100%; 高さ:100vh; background-image:url("画像/background.jpg"); 背景サイズ:100% 100%;

しかし、私はこれを行うための最良の方法ではないように感じます

これまでの私のドキュメントは次のとおりです。

誰かがこれらの問題をすべて解決するのを手伝ってくれたら本当にありがたいです

背景画像をモバイル向けにレスポンシブにするために、2日間試しました。これは 1 つの長いホームページ (約 8000px) です。ページ全体のコンテンツには、div の親「background_div」があります。カバーのサイズを変更するか、タグを含めるかの両方を試しました。画像は拡大されたようにピクセル化され、コンテンツは反応しますが、背景の画像が頭痛の種になります。デバイスの幅を認識し、縮小し、8000px の長さのページに沿って引き伸ばされないように固定する必要があります。ここで何が問題なのか、誰かが私に考えを与えることができますか?

Safari は<img> srcset & sizes属性 ( http://caniuse.com/#search=srcset ) をサポートするようになり、テストでは機能します。

Safari を使用して機能検出ライブラリhttp://featurejs.comにアクセスすると、(誤って)サポートされていないsizesことが報告されます。

sizesが img オブジェクトにないためです。

次のような画像が定義されている Safari のページにアクセスすると、次のようになります。

次に、コンソールでこれを試してください：

img.sizesただし、Chrome または Firefox では正しく報告されます。

動的に追加されるコンテンツのサイズを操作できるようにしたいと考えています。

物件にアクセスする方法を知っている人はいますか？たぶん、Safari では別の名前で呼ばれています (希望的観測)。

asp.net フレームワークで SVG 座標を使用している Web ページがあります。

エラーを試行して、ほとんどのタグを削除してもエラーは発生しません。しかし、すべてのタグが含まれていると、次のエラーが発生します

ソースコードは

+8000 行以上

私に何ができる？jquery を使用すると、これらのタグでイベントが発生するため、要素タグを使用する必要があります。したがって、ファイルを指すだけではありません。私はすべてが必要です

更新 インライン ポリゴン タグを 898kb の 1 行に減らしたところ、VSBComplier.exe (そのようなもの) がすべての RAM を占有し、ブラウザをクラッシュさせることに気付きました。

デバッグするには、コメントで svg を取り出す必要があります。