一部のデバイスでは、応答するイメージが正しくありません

Question

私はヒーローイメージを反応的にしようとしています。 通常は16：9ですが、モバイル版ではブラウザに1：1の比率で別の画像を表示させたいと考えていました。ただし、一部のデバイスでは16：9のバージョンが表示されます。これは、特に三星ギャラクシーS6のために行く。

私は本当に解決策の周りに私の頭を包むことはできません。正直言って、私は前後にそれをテストすることができる私の近くに類似の製品はありません。

私はたくさんの行方不明を知っています。私は、ビューポートの幅に基づいて画像のアスペクト比を変更する

<img src="{{ 'mainad1-image-2880.jpg' | asset_url }}" width="2880" srcset=" 
{{ 'mainad1-image-406.jpg' | asset_url }} 406w, 
{{ 'mainad1-image-608.jpg' | asset_url }} 608w, 
{{ 'mainad1-image-800.jpg' | asset_url }} 800w, 
{{ 'mainad1-image-1024.jpg' | asset_url }} 1024w, 
{{ 'mainad1-image-1050.jpg' | asset_url }} 1050w, 
{{ 'mainad1-image-1200.jpg' | asset_url }} 1200w, 
{{ 'mainad1-image-1440.jpg' | asset_url }} 1440w, 
{{ 'mainad1-image-1920.jpg' | asset_url }} 1920w, 
{{ 'mainad1-image-2880.jpg' | asset_url }} 2880w" 
sizes="(max-width: 2880px) 100vw, 2880px" 
alt="{{ settings.mainad_1_alt_text }}"/> 

Answer 1

が応答画像のためのアートディレクションのユースケースの1 ..です今黒く塗りつぶしています。

<picture>の構文でのみ対処できます。

属性は、すべてのビューポートの幅で同じアスペクト比と内容を保持する画像のみを扱います。