@Medienabfragen und Bildaustausch [closed]

Lesezeit: 4 Minuten

@Medienabfragen und Bildaustausch closed
Aarati Akkapeddi

Ich möchte, dass sich das Bild auf meiner Website vollständig ändert, wenn die Größe des Browsers geändert wird.

Ich habe Medienabfragen verwendet, aber ich kann es nicht richtig hinbekommen. Irgendwelche Gedanken/Tipps?

  • Willkommen – wenn Sie neu sind, sollten Sie sich überlegen, wie man fragt, um schnell zu lernen, wie man hier gute Fragen formuliert. Für den Anfang wird es für uns enorm einfacher, das Problem zu lokalisieren, wenn Sie den Code zeigen, den Sie derzeit haben.

    – BoltClock

    9. Januar 15 um 4:37 Uhr

  • Diese Frage kann den Meta-Effekt erfahren.

    – Zoë

    25. September 19 um 12:33 Uhr


@Medienabfragen und Bildaustausch closed
jmore009

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

wenn es ein ist image Tag können Sie eine Klasse verwenden. Verstecke das zweite Bild beim Laden der Seite und zeige + verstecke Bild 1 bei einer bestimmten Bildschirmgröße wie folgt:

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 ein ist background-image Sie können 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

  • @AaratiAkkapeddi gerne geschehen. Wenn dies die Antwort ist, nach der Sie gesucht haben, können Sie sie als gelöst abhaken?

    – jmore009

    10. Januar 15 um 15:22 Uhr

  • Wird die erste Lösung dazu führen, dass der Browser das nicht benötigte Bild herunterlädt?

    – Verbündeter

    2. August 16 um 5:45 Uhr

  • @Ally-Browser laden keine Bilder herunter, es sei denn, sie müssen sie anzeigen

    – javier_domenech

    21. September 17 um 9:34 Uhr

  • @vivoconunxino: Vielleicht wird jedes immer geladen? litmus.com/community/discussions/…

    – Weißkopfseeadler

    13. März 19 um 0:49 Uhr

  • Im ersten Beispiel sollten Sie unterschiedliche src haben (wie Sie den Quellcode offenbaren).

    – Fil

    27. Januar 20 um 14:56 Uhr


1642330811 233 @Medienabfragen und Bildaustausch closed
Ekfuhrmann

Dies kann mit HTML5 erfolgen picture Element, das kein CSS zum Ändern benötigt img Elemente zu bestimmten Medienabfragen. Wenn Sie an diesem Ansatz interessiert sind, sollten Sie sich dessen bewusst sein Browserunterstützung was tut NICHT gehören IE, obwohl es eine gibt Polyfill für ältere Browser.

<h1>Resize Window</h1>
<picture>
  <source  media="(min-width: 1400px)"/>
  <source  media="(min-width: 1200px)"/>
  <source  media="(min-width: 800px)"/>
  <source  media="(min-width: 600px)"/>
  <img src="https://via.placeholder.com/400" alt="example"/>
</picture>

  • Normalerweise verwende ich die unten beschriebenen CSS-Methoden, aber diese Methode scheint eine ausgezeichnete Methode für Feature-Fotos zu sein, wenn Sie wissen, dass sie in verschiedenen Medien unterschiedlich zugeschnitten werden sollen.

    – Russellmanie

    15. Juni 18 um 21:33 Uhr

  • Das große Problem mit @media und verwenden display:none; ist, dass das Bild noch geladen wird. Selbst wenn Sie einen Mobile-First-Ansatz anwenden, laden größere Displays immer noch beide Bilder im Gegensatz zu 1. Diese Methode ruft tatsächlich nur das erforderliche Bild ab, das Sie beim Laden benötigen, und lädt dann Bilder in anderen Größen, wenn sich der Darstellungsbereich ändert .

    – Ekfuhrmann

    19. Juni 18 um 3:35 Uhr


  • Unterstützung von @ekfuhrmann: litmus.com/community/discussions/…

    – Weißkopfseeadler

    13. März 19 um 0:47 Uhr

  • Genau @ekfuhrmann ist richtig. Alle Leute, die sagen, dass sie kein Display verwenden sollen, sind eigentlich schlechte Frontend-Entwickler. Würde nicht mieten. Gute Antwort ekfuhrmann!

    – Michael Paccione

    21. November 20 um 4:32 Uhr

@Medienabfragen und Bildaustausch closed
Cédric Ipkiss

Du kannst den … benutzen content -Eigenschaft, um Ihr Bild einzufügen. Es kann jedoch schwierig sein, solche Bilder zu stylen. (Führen Sie das Code-Snippet 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>

.

504540cookie-check@Medienabfragen und Bildaustausch [closed]

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy