問題タブ [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.
django - django cms とレスポンシブ画像
django と django-cms を使用してレスポンシブ Web サイトを構築しています。これまでのところ、すべて問題ありません。ここで、レスポンシブ イメージを指定して、さまざまなデバイスに配信する必要があります。この問題を自分でどのように解決しますか？
ウェブサイトの作成者がバックエンドにさまざまなサイズ (小、中、大など) の画像をアップロードして srcset (おそらくdjango-cascadeを使用) で使用する可能性はありますか? php-projectアダプティブ イメージ.
django-daguerre を見つけましたが、django-cms でどのように実装できるかわかりません。django-responsive-images 1.0.2 パッケージもあります。
ですから、プロジェクトでこの問題をどのように解決するかをお聞きしたいと思います。
css - img srcset iMac 5k ディスプレイで 1x を選択
全幅のブートストラップ スライダーを作成したいのですが、5k iMac で動作させる必要があるため、次のように画像を追加し
<img srcset="http://placehold.it/1920x800 1x, http://placehold.it/3840x1600 2x, http://placehold.it/5120x2130 4x" alt="Retina" />ました。
グーグルで調べた後、私はこれを行いました: <img srcset="http://placehold.it/1920x800 1920w, http://placehold.it/3840x1600 3840w, http://placehold.it/5120x2130 5120w" alt="Retina" />、クロムは3840w画像を選択し、うまく塗りつぶされましたが、この構文 ( wを使用) は Safari では機能しません。ご想像のとおり、サファリのサポートが必要です。
5k iMac ディスプレイは 1x と見なされますか? もしそうなら、いくつかのポリフィルで私の問題を解決できますか?
編集： JsFiddle
html - レスポンシブ画像は、`sizes` で長さとして指定された `em` でどのように機能しますか?
emレスポンシブ画像で使用される場合、ブラウザーはどのようにユニットを理解できますか?
これは検証済みで、ブラウザ コンソールに警告は表示されません。しかし、画像プリローダーの要点が、CSS がダウンロードされて解析される前に画像を取得することである場合、ブラウザーは何のために使用するのemでしょうか?
font-sizeそれが適用されるのはデフォルトだけ<html>ですか？rem明確にするために使用する必要がありますか？ユーザーがズームすると、2 つに違いはありますか?
これは理論上の話ではありません。私はメディアクエリでブレークポイントを使用emしていますが、一部の画像は、最適な行の長さのサイズのコンテナーによって制限されています (もちろん、を使用してemいます)。
スペックを確認しましたが、新しいレスポンシブ画像機能については非常に簡潔です。
html - Firefox: float 内で 2x srcset が指定された Img のスペーシングがおかしい
私は次のようなHTMLを持っています:
CSS は次のようになります。
Firefox でのみ、"retina" ディスプレイで表示すると、.left div(指定されていないwidth) の幅が 2 倍になります。これを他のブラウザで複製することはできません。
スクリーンショット:
このペンで再現。
html - ブラウザ ウィンドウのサイズが変更された場合に使用される「srcset」画像を再計算することは可能ですか?
srcsetページが読み込まれたら、ブラウザ ウィンドウのサイズを再計算して、使用している画像を更新することは可能ですか。
これを行う理由は、デスクトップでブラウザー ウィンドウが圧縮されている場合、サイトを読み込んでからブラウザー ウィンドウを大きくすると、「small.jpg」( で設定srcset) が拡大縮小されるためです。ユーザーは頭がおかしくなった画像になります。
問題を表示するためにjsfiddleの作成を開始しましたがsrcset、jsfiddleの結果グリッドではなく、ブラウザーウィンドウによって計算されると思われるため、うまく機能しません。
興味がある場合は、この下を空白のhtmlファイルにコピー アンド ペーストして、ローカル サーバーで実行できます (ローカルの http:// サーバー上にある必要があるため、ネットワーク デバッグ タブを表示して、ブラウザーがどの画像を読み込んだかを確認できます)。wontを使用してファイルの URL を介してブラウザで実行するとfile:///、ネットワーク デバッグ タブを介してどの画像がロードされているかを確認できます。
html - `size` は `srcset` で使用する必要がありますか? 長所と短所は何ですか?
sizeと一緒に使用する必要がありsrcsetますか? 私は、50px のボードを除いて、ほぼ全画面に大きな画像を表示するサイトを持っています。この画像の比率は、画面の縦横比やサイズによって変更する必要はありません。
現時点では、次のsrcsetように使用しています：
これに関する問題は、ユーザーがデスクトップを使用している場合に、圧縮されたブラウザーでサイトを開いた場合 (小さな画像が読み込まれるため)、ブラウザー ウィンドウを大きくすると、小さな画像が拡大縮小されるため、ピクセル化されることです。 . （ページを更新すると、大または中の画像が表示されますが、ブラウザウィンドウのサイズを変更するたびにページを更新する人はいないと思います）
属性を使用しsizeて、ブラウザ ウィンドウのサイズが変更された場合に使用する画像を再計算しますか? sizeそうでない場合、属性のユースケースは何ですか?