問題タブ [responsive-images]

srcsetデバイスのピクセル密度の調整とアートディレクションの両方に使用することに関する多くの記事を読みました。

Paddi Macdonnell による 2015 年のレスポンシブ画像の現状

srcset パート 2: Rich Finelli による W 記述子とサイズ属性

これらのどちらも、 w-descriptors を属性なしで使用できるかどうかsizesを明確にしません。ほとんどは反対を示しま​​す (w-descriptor は と一緒に機能しますsizes)

私自身の初歩的なテストでは、 w 記述子のみを使用して画像の切り替えが機能することが確認されています。

w-descriptor を使用して幅に応じて多数の異なる画像を指定すると、ブラウザーは限られたスペースに収まる最適な画像を選択することがわかりました。

他のコードは必要ありません。

レスポンシブ サイトを設計する場合、これは明らかに混乱を招きます。なぜなら、私はデザイナーとして次のケースしか必要としないからです。

1. device-pixel-density に基づいて画像を変更します (私にとってはうまくいきます。すばらしい!)
2. 利用可能な幅に基づいて画像（アートディレクション）を変更します（私にとってはうまくいきます。素晴らしいです！）

この大失敗にどのように影響するのか疑問に思っていますsizes。これが新しい機能であることを心から感謝します。

デスクトップ用に満足している特定の高さと幅の大きな背景画像があります。背景位置センタートップatmを使っているので画像全体は見えますが、ブラウザの幅が狭くなっているため幅がトリミングされています。

フォーカスされている画像の特定の中央部分があるため、特定のブラウザー幅 (約 1000px - 画像が幅でトリミングされている場所) に達したら、画像のその表示可能領域が応答するようにします。ブラウザが決定した目に見えるトリミングされた幅を保持するモバイルへ...これは可能ですか?

どうもありがとう

大型デバイスのユーザー向けにアニメーション GIF を表示するために使用srcsetしていますが、小規模および中規模デバイスのユーザーには静的 JPG を表示する必要があります。

次のコードは、1x 画面でブラウザー ウィンドウのサイズを変更するときにうまく機能します。私が直面している問題は、iPad でページをポートレート モード (768px) で表示すると、アニメーション GIF が表示されることです。ブラウザは 2 倍の解像度であるため、より高品質の画像を表示しようとしていることがわかりますが、私の場合は、まったく異なる画像である必要があります。

ユーザーの画面の幅が 940px を超える場合にのみ GIF を表示するように変更するにはどうすればよいですか?

このページのようなヘッダー画像をコーディングしようとしています: http://www.eltrecetv.com.ar/nosotros-a-la-manana . ページのサイズを変更すると、男の画像がどうなるかに注意して ください。それは同じ場所にとどまり、常に中央に配置され、切り取られません (少し下にありますが、とにかくそれほどではありません)。これが私の謙虚で簡潔なコードです：（そしてここにもフィドルがあります：https://jsfiddle.net/wvep5ga1/）

html:

CSS:

私が見つけた問題は、ブラウザー ウィンドウのサイズを変更すると、常に肩が見える元のページとは対照的に、div が圧縮されて男性の顔だけが見えるようになることです。これを正しく説明しているかどうかはわかりませんが、基本的にウィンドウのサイズを変更すると、元のページよりも div の高さがはるかに速く変化し、ページの残りの部分に影響を与えます。常に同じ場所にとどまり、常に同じ縦横比でなければなりません。アスペクト比の問題は解決しましたが、ウィンドウのサイズ変更時に div の高さが圧縮および拡張されすぎるという問題があります。

元のページは Drupal 7 を使用して作成されたと思います。しかし、私が欲しいのは、まさにそれを行う CSS スニペットです。私はそれが可能であることを知っています、私は何時間もすべてを試しましたが、何かが欠けています. 元のページで解像度の異なる多くの画像が使用されていることは知っていますが、それは問題ではありません。

誰かが助けてくれることを願っています。コメントをお待ちしております。

前もって感謝します！

これは、この背景をもたらすセクションに適用された css です。

他のセクションにも同じ css コードを使用していますが、問題なく動作します。ここで何が問題なのかわかりません。BG画像サイズは1600px×400pxです。