問題タブ [responsive-images]

画面サイズに応じて画像のサイズを自動的に変更するにはどうすればよいですか?

次のような画像のcss属性を追加します

しかし、それは小さな画像をそれが入っているコンテナの形にし、コンテナが巨大な場合、小さな画像は伸びてピクセル化します. では、大きな画像用に特別な css 属性を作成するだけですか? イメージが入っているコンテナまたは div をイメージでいっぱいにしたくありません。画面サイズに基づいてサイズを変更したいだけです。テーブルも同様にサイズ変更する必要があります。divとテーブルの両方を使用しています。

Web サイトで使用するレスポンシブ画像を効率的に生成しようとしていますが、既存のファイルとパスを gulp で処理するのに問題があります。画像は、階層構造のフォルダーに存在します。ここpagesは、いくつかのサブフォルダーが下に向かって再帰するルートです。そのほとんどに画像があります。

私の現在のタスクは次のようになります。

これには 2 つの主な問題があります。

1. 画像はソースと同じフォルダーにパイプされますが、ソースのimages隣のフォルダーにあることが望ましい場合です。
2. タスクが再度実行されると、ソースと以前に生成されたレスポンシブ イメージの両方に基づいて新しいファイルが生成されます。

このタスクは、サイズ変更に GraphicsMagick を利用するgulp-responsive-images を使用します。問題 2 を解決するためにgulp-changed (set as ) を使用し.pipe($.cached('pages'))てみましたが、効果がないようでした。

現在のセットアップに基づいて、問題 1 と 2 を解決するにはどうすればよいですか?

私はこれに何度も遭遇し、常に CSS と JS の組み合わせで解決していましたが、レスポンシブ画像のサポートが増えるにつれて、より説得力のある解決策を探していました。セマンティクスを保持しながら（CSSなし）、ブラウザの事前読み込みを利用して（JS遅延読み込みなし）、モバイルに画像を読み込まないようにしています。background-image

どうすればこれを達成できますか?

フルページの背景画像を持つ Web サイトを作成しようとしています。デスクトップバージョンで動作するようにgithubなりましたが、携帯電話にプッシュして表示すると、背景画像が上部の長い画像になります。で を使用しbackground-size: coverていcssます。以下のスクリーンショット。モバイルでスペース全体を占有するようにするにはどうすればよいですか? ありがとう ：）

デスクトップ版:

モバイル版:

HTMLは以下の通り

django プロジェクトで ckeditor を使用しています。これはレスポンシブ ページであるため、ページの幅が変更されると、表と画像を除いてすべてが変更され、それらは同じサイズのままです。すべてをレンダリングするために「安全な」フィルターを使用していますが、正常に動作しますが、画像とテーブルのサイズが変更されません。さまざまな画面サイズに対応するにはどうすればよいですか? 前もって感謝します。

Mac Retina および Google Chrome 開発者ツールで、srcset 内の他の画像が表示されないため、これを求めています。

それは常により大きなイメージをもたらします。

私が行っているテストは次のとおりです。-開発者ツールを開きます-ウィンドウのサイズを画像解像度に近づけます-ページを更新します

アップデート

オンラインの例: Srcset