DIVの背景画像タグで/に応答性のある画像を使用することはできますか？

Question

私は通常、私は単純にbackground-image:url(image.jpg); background-size: 100% 100%:を使用しますが、私は少しもしようとしている（石積みグリッド内のすべての）異なるサイズのデータ​​ベースから自分のサイトにロードされているサムネイルの選択を使用する

を探しています特定のイメージファイルサイズを意識したより多くの帯域幅私はまた、ポートレートの向きを使用してモバイルブラウザ用の特定の作物をターゲットにしたいと考えています。

background-imageプロパティを使用しているときに、<picture>の機能、つまりmedia="(min-width: 40em) and (orientation: portrait)"の機能を使用できますか？

代わりにimgまたはpictureタグを使用する必要がありますか？

Answer 1

メディアクエリと一緒にimageタグを使用します。それは問題を解決し、より小さな画像サイズが必要な場合は、より小さなバージョンを送ることができます。帯域幅がここで重大な問題である場合は、画面サイズに基づいてのみメディア照会を行うことを検討することができます。