@mediaのクエリと画像の交換

Question

私はCSSとこのフォーラムを初めて利用しました。しかし私は、ブラウザのサイズを変更したときにサイト内の画像を完全に変更したいという小さなプロジェクトに取り組んできました。

私はメディアクエリを使用していますか？しかし、私はそれを正しくするように見えることはできません。 考え/ヒント？

Answer 1

今後、試したコードを追加してください。

imageタグの場合は、クラスを使用できます。そのような特定の画面サイズでページロードショー+非表示画像1上の第2の画像を隠す：

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; 
    } 
} 

EXAMPLE 1 - SHRINK BROWSER

または

それはあなたは、単に画像を入れ替えることができ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"); 
    } 
} 

EXAMPLE 2 - SHRINK BROWSER

Answer 2

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>