web-dev-qa-db-ja.com

@mediaクエリと画像スワッピング

ブラウザのサイズを変更すると、サイトの画像が完全に変更されるようになります。

私はメディアクエリを使用してきましたが、正しく理解できないようです。何か考え/ヒント？

htmlcssmedia-queriesimagesource
15
Aarati Akkapeddi

将来的には、試したコードを追加してください。

imageタグの場合、クラスを使用できます。ページの読み込み時に2番目の画像を非表示にし、次のように特定の画面サイズで画像1を表示+非表示にします。

[〜＃〜] html [〜＃〜]

<img src="image.jpg" class="image1"/>
<img src="image.jpg" class="image2"/>

[〜＃〜] css [〜＃〜]

.image2{
   display: none;
}

@media only screen and (max-width: 500px){ //some value
   .image1{
     display: none;
   }

   .image2{
     display: block;
   }
}

例1-縮小ブラウザ

[〜＃〜] or [〜＃〜]

background-imageの場合は、単に画像を交換できます：

[〜＃〜] html [〜＃〜]

<div class="example"></div>

[〜＃〜] css [〜＃〜]

.example{
   background-image: url("example.jpg");
}

@media only screen and (max-width: 500px){ //some value

   .example{
      background-image: url("example2.jpg");
   }
}

例2-縮小ブラウザ

43
jmore009

これは、指定されたメディアクエリでpicture要素を変更するためにCSSを必要としないHTML5 img要素を使用して実行できます。このアプローチに興味がある場合は、 ブラウザサポート が[〜＃〜] not [〜＃〜]IEを含めますが、古いブラウザには polyfill があります。

<h1>Resize Window</h1>
<picture>
  <source srcset="https://placehold.it/1400x1400" media="(min-width: 1400px)"/>
  <source srcset="https://placehold.it/1200x1200" media="(min-width: 1200px)"/>
  <source srcset="https://placehold.it/800x800" media="(min-width: 800px)"/>
  <source srcset="https://placehold.it/600x600" media="(min-width: 600px)"/>
  <img src="https://placehold.it/400x400" alt="example"/>
</picture>
15
ekfuhrmann

contentプロパティを使用して画像を挿入できます。ただし、このように含まれる画像のスタイル設定は難しい場合があります。 （ブラウザのサイズを変更する前にコードスニペットを全画面で実行）

@media screen and (max-width: 479px) {
    div img {
        display:none;
    }
    div::before {
        content: url("https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg?v=6e4af45f4d66");
    }
}
<p>Resize this window to see image change</p>
<div>
    <img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.svg?v=2bb144720a66" width="200px" />
</div>
0
che-azeh