@media Abfragen und Bildwechsel

Question

Ich bin neu in CSS und in diesem Forum. Aber ich habe an einem kleinen Projekt gearbeitet, bei dem ich möchte, dass sich das Bild auf meiner Website vollständig ändert, wenn die Größe des Browsers geändert wird.

Ich habe Media-Abfragen verwendet? aber ich kann es nicht richtig verstehen. irgendwelche Gedanken/Tipps?

Answer 1

In der Zukunft fügen Sie Code, den Sie versucht haben, hinzu.

Wenn es ein image Tag ist, können Sie eine Klasse verwenden. Ausblenden das zweite Bild auf Seite laden und anzeigen + Bild verbergen 1 zu einem bestimmten Bildschirmgröße wie so:

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

ODER

Wenn es ein background-image ist, können Sie einfach das Bild tauschen:

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

Sie verwenden können die content Eigenschaft, um Ihr Bild einzufügen. Bilder wie diese könnten jedoch schwierig zu stylen sein. (Run Code-Schnipsel in vollem Umfang nutzen, bevor Browser Ändern der Größe)

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