問題タブ [srcset]

レスポンシブ Web デザイン用の画像を設定しており、最近正式化されたレスポンシブ画像構文を採用しています。私はすべての側面を使用しているわけではなく、srcset と sizes の部分だけを使用しています。大まかに言えば、私のマークアップは次のとおりです。

私のデザインはモバイルファーストの方法で構築されています。だから私の質問はこれです：

メディア クエリの順序によって、ブラウザが選択する画像に違いはありますか?

ご覧のとおり、最大のブレークポイントから最小のブレークポイントに移動しています。これは、デフォルトのサイズが小さく、私が見たすべての構文例がデフォルトのサイズを最後に置いているためです。しかし、これは、最小幅のメディア クエリも使用する私のメインの CSS (SASS 経由でコンパイル) とは対照的です。

このマークアップでも、最初に小さなブレークポイントを設定する必要がありますか? それとも、画像マークアップ コンテキスト内で違いはありませんか?

デスクトップ版とモバイル版の 2 つの画像があります。ビューポートの幅が 480px 未満にサイズ変更されたときに、デスクトップ イメージをモバイル イメージに置き換えたいと思います。これは、次の CSS で background-image プロパティを使用した場合と同様です。

srcset HTML属性でこれを達成できると思いました：

ブラウザは常にモバイル画像を表示し、ビューポートのサイズ変更時に再スケーリングしますが、2つの画像がそれぞれの元のサイズのままであることを望みます。

srcset でこの動作を実現することは可能ですか?

これは私のイメージタグがどのように見えるかです:

デスクトップ デバイスの場合、小さい親指 (270x190) を使用します。モバイル デバイスの場合は、大きな親指 (690x486) を使用します。しかし、中程度の親指 (540x380) を使用する Retina デスクトップのルールを作成するにはどうすればよいでしょうか?

画像ができるだけ大きく拡大されるスライドショーのようなものがありますが、ビューポートの幅または高さを超えません。基本的にobject-fit: contain。

私はこれらの画像をレスポンシブにしたいと考えています。なぜなら、電話と非常に大きなデスクトップの場合、「できるだけ大きく」することは大きな違いだからです。<img srcset>現在、画面密度（x記述子）または幅（記述子）のみを行うため、使用できませんw。その<picture>ため、手動で選択ロジックを自分で作成する必要があります。

私はから始めました：

しかし、画面の向きほど単純ではありません。実際の縦横比は、ビューポート (非常に背の高い携帯電話、ブラウザーのツールバーなど) と画像自体の両方でかなり風変わりなものになる可能性があるためです。同じ画像でも、ある画面では幅が制限されていても、別の画面では高さが制限されている場合があります。アスペクト比を解析するスクリプトを作成できると思いますが、それを意味のあるリストに変換するロジックに困惑していsrcsetますsizes。

理想的には 記述子をすぐ<img srcset>に取得しますが、h今すぐ機能するものを一緒にハックしたいと思います。

W3C Validator は、次のコードでエラーをスローしています:

エラーは次のとおりです。

不適切な値 /images/en-us/news/20140214-01.jpg 1x、/images/en-us/news/20140214-01-mobile.jpg 要素 img の属性 srcset の 640w: 画像 /images/ の幅が指定されていませんen-us/news/20140214-01.jpg. (1 つ以上の画像候補文字列が幅を指定するため (たとえば、画像 /images/en-us/news/20140214-01-mobile.jpg の文字列)、すべての画像候補文字列が幅を指定する必要があります。)

では、ピクセル密度 (1x) の両方の画像を指定するにはどうすればよいですか? 将来的には、高密度ディスプレイ (2x) と幅 640 ピクセル未満のディスプレイ用に 1 つを指定する必要があるかもしれません。つまり、W3C バリデーターを満足させる方法です。

アップデート：

さて、私はそれをもう少しいじりましたが、今ではバリデーターは文句を言わなくなりましたが、正しく機能していないように見えるので、まだ戦いに勝ったとは思いません.

私は今これを持っています：

しかし、現在Chromeでは、画面の幅に関係なく、「-mobile」画像だけが表示されます。幅が 640px を超えるディスプレイに、幅 1420px のフル画像を表示したい。

私は場違いなことが 1 つだけあると推測しています...どんな助けもいただければ幸いです。

別の画像をクリックして画像を変更したいのですが、固定画像を変更するだけでなく、srcset の利点を利用したいので、ブラウザーは現在のメイン画像サイズ (レスポンシブ レイアウト) に適した画像を選択します。

これは私が今使っているものです、バニラ：

私はここでjqueryを開いています。

誰でもこれを処理する方法を知っていますか?

srcset 幅の値がどのように機能するかを理解しようとしていますが、私が持っている基本的な例は私をうんざりさせています。

以下のコードを考えると、ビューポートが 600px を超えると大きな画像が表示されると思います。ただし、実際には 784px で変化します。これがなぜなのかわかりません。