@media query e scambio di immagini

Question

Sono nuovo di CSS e di questo forum. Ma ho lavorato su un piccolo progetto in cui voglio che l'immagine nel mio sito cambi completamente quando il browser viene ridimensionato.

Ho utilizzato le query multimediali? ma non riesco a farlo bene. eventuali pensieri/suggerimenti?

Answer 1

In futuro si prega di aggiungere il codice che hai provato.

se si tratta di un tag image è possibile utilizzare una classe. Nascondere la seconda immagine al caricamento della pagina e mostrare + nascondere un'immagine 1 ad una certa dimensione dello schermo in questo modo:

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

O

Se è un background-image si può semplicemente scambiare l'immagine:

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

È possibile utilizzare la proprietà content per inserire la tua immagine. Tuttavia, le immagini incluse in questo modo potrebbero essere difficili da stile. (Frammento di codice Esegui a schermo intero prima del ridimensionamento del browser)

@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>