webentwicklung-frage-antwort-db.com.de

@media Abfragen und Bildaustausch

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

Ich habe Media-Abfragen verwendet. aber ich scheine es nicht richtig zu machen ... irgendwelche Gedanken/Tipps?

12

Fügen Sie in Zukunft Code hinzu, den Sie ausprobiert haben.

wenn es sich um ein image-Tag handelt, können Sie eine Klasse verwenden. Das zweite Bild beim Laden der Seite ausblenden und Bild 1 bei einer bestimmten Bildschirmgröße anzeigen + ausblenden:

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

BEISPIEL 1 - SHRINK BROWSER

ODER

Wenn es sich um einen background-image handelt, können Sie das Bild einfach austauschen:

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

BEISPIEL 2 - SHRINK BROWSER

39
jmore009

Dies kann mit dem HTML5-Element picture erfolgen, das kein CSS zum Ändern von img-Elementen in angegebenen Medienabfragen erfordert. Wenn Sie an diesem Ansatz interessiert sind, beachten Sie die Browserunterstützung , die NICHT IE enthält, obwohl es für ältere Browser eine polyfill gibt.

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

7
ekfuhrmann

Sie können die content-Eigenschaft verwenden, um Ihr Bild einzufügen. Bilder, die auf diese Weise enthalten sind, können jedoch schwierig zu formatieren sein. ( Führen Sie das Codeausschnitt im Vollbildmodus aus, bevor Sie die Größe des Browsers ändern )

@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