1

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

.logo { background-image: url(http://placehold.it/400x200&text=desktop); }
media screen and (max-width: 480px) {
    .logo { background-image: url(http://placehold.it/300x150&text=mobile); }
}

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

<img src="http://placehold.it/400x200&amp;text=desktop" alt="" srcset="http://placehold.it/300x150&amp;text=mobile 480w">

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

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

4

1 に答える 1

2

「アート ディレクション」を行いたいようですね。つまり、画像は、大きい画像を縮小しただけではなく、大きく異なります。その場合は、picture要素を使用する必要があります。

<picture>
 <source srcset="http://placehold.it/300x150&amp;text=mobile"
         media="(max-width: 480px)">
 <img src="http://placehold.it/400x200&amp;text=desktop" alt="...">
</picture>

ただし、小さな画像が実際には大きな画像の縮小版である場合は、 を使用できますsrcsetが、どの画像が選択されるかを制御することはできません。画面密度、ネットワークの状態、ユーザー設定、ブラウザのキャッシュなどに基づいて最適なものを選択するのは、ブラウザ次第です。

<img src="http://placehold.it/400x200&amp;text=desktop"
     srcset="http://placehold.it/400x200&amp;text=desktop 400w,
             http://placehold.it/300x150&amp;text=mobile 300w"
     sizes="(max-width: 480px) 300px, 400px">

注:srcsetが使用され、より大きな画像候補がキャッシュにある場合、実際のビューポート サイズに関係なく、Chrome は常にこのキャッシュされた画像候補を表示します。

于 2015-04-07T15:13:17.957 に答える