0

Android、iPhone、および Windows Phone 用の HTML5 アプリを開発しています。メディア クエリを使用して、画面の幅に応じて異なる画像ファイルを表示しています。

CSSbackground-imageプロパティを使用して画像を表示すると、メディア クエリの値に応じて異なる CSS クラスを使用して画像ファイルを変更できます。しかし、imgタグを使用して表示されている場合、画像を変更できません。

imgCSS メディア クエリを使用して、タグに関連付けられた画像ソースを変更する方法はありますか?

4

1 に答える 1

4

スプライト シートを使用し、メディア クエリの基準に応じてスプライトの新しい部分をサンプリングするためbackground-positionに、<div>または同様の (ページ上の を置き換える) を変更します。<img>

例：

HTML:

<div></div>

CSS:

div
{
    width: 100px;
    height: 100px;
    background: url(http://martywallace.com/view/textures/photo/terraria.jpg) no-repeat;
}

@media all and (max-width: 1000px)
{
    div
    {
        background-position: -20px -50px;
    }
}
于 2012-10-08T06:36:09.197 に答える