# 133: Reaktionsschnelle Bilder herausfinden - CSS-Tricks

Anonim

Ich bin wahrscheinlich ein bisschen selten, weil ich es eher genossen habe, mit den reaktionsschnellen Bildern Schritt zu halten. Es ist ein interessantes Problem, das viele interessante Lösungen hervorgebracht hat. Das Ganze beginnt jetzt zu Ende zu gehen, jetzt, wo die offiziellen Lösungen sind:

  1. und Freunde

  2. Angenommen, wir befinden uns auf einem 1x-Bildschirm. Da wir dem Browser mitgeteilt haben, dass wir diese Bilder so groß wie möglich verwenden werden (100% des Ansichtsfensters), werden die "Haltepunkte" für den Fall, dass der Browser die Bilder ausklappt, bei 1280px, 640px, und 320px, genau die gleichen Größen, wie wir es den Bildern gesagt haben.

    Wenn wir uns auf einem 2x-Bildschirm befinden, werden diese „Haltepunkte“ halbiert (unabhängig davon, was wir tatsächlich tun, um die Größe dieser Bilder zu bestimmen) und liegen bei 640px, 320px und 160px.

    Nehmen wir jetzt an, wir verwenden dieselben Bilder, aber wir wissen viel mehr über unser Seitenlayout und haben Folgendes verwendet:

    Hier sagen wir (mit dem sizesAttribut), wenn das Ansichtsfenster 500 Pixel oder kleiner ist, beabsichtigen wir, das Bild mit einer Breite von 250 Pixel anzuzeigen. Wenn das Ansichtsfenster breiter ist, zeigen Sie das Bild mit einer Breite von 500 Pixel an.

    Das würde mit CSS wie folgt übereinstimmen:

    img ( width: 500px; ) @media (max-width: 500px) ( img ( width: 250px; ) )

    Auf einem 1x-Bildschirm erhalten Sie immer das 320-W-Bild (klein), wenn das Ansichtsfenster 500 Pixel breit oder kleiner ist, und das 640-W-Bild (mittel), wenn das Ansichtsfenster größer ist. Sie erhalten nie ein großes Bild, da Sie feststellen können, dass Sie niemals so viele Pixel benötigen.

    Auf einem 2x-Bildschirm erhalten Sie immer das 640-W-Bild (mittel), wenn das Ansichtsfenster 500 Pixel breit oder kleiner ist (weil es 500 Pixel Pixel benötigt und das kleine bei 320 Pixel nicht ausreicht), und Sie erhalten immer das 1280w (großes) Bild, wenn das Ansichtsfenster größer ist. Sie erhalten nie ein kleines Bild, da es nie genug Pixel enthält, um das abzudecken, bei dem Sie das Bild rendern möchten.

    Tatsächliche Dimensionierung

    Denken Sie daran, dass die tatsächliche Größe des Bildes immer noch bei Ihnen liegt. Ich würde denken, dass Sie es in den meisten Fällen über das CSS tun. Und das CSS gewinnt immer. Was Sie dort deklarieren, ist die gerenderte Breite des Bildes, egal was mit dem srcsetund dem passiert sizes. Das klappt nur, welches Bild angezeigt wird.

    Dies macht die Größenattribute etwas schwierig. Angenommen, Sie haben so etwas wie:

    .container ( width: 80%; ) .container article ( width: 50%; ) .container article img ( width: 33.33% )

    Das ist überhaupt nicht ungewöhnlich. Welche Größe verwenden Sie nun im sizesAttribut? Das wären 13,33% (multiplizieren Sie alle zusammen), da diese Zahl relativ zum Ansichtsfenster und nicht zum Container sein muss. Und das berücksichtigt nicht die Ränder und Polsterungen und das Zeug auf diesen Behältern, also ist es eine Art Vermutung. Ich denke, bei Hufeisen, Handgranaten und dem Größenattribut zählt genau.

    Nehmen wir dann an, es kommt eine Medienabfrage und der Körper wird darüber hinaus zu 75% breit. Sie müssen dies wissen, damit Sie die Ihrer Meinung nach gerenderte Größe der Bilder anpassen können. Ihr Größenattribut könnte werden:

    sizes="(min-width: 500px) 8%, 13.33%"

    Führen Sie dies dann für jede Layout-Medienabfrage erneut durch, die sich auf Inhaltsbilder auswirkt. Es kann etwas komplex werden.

    Praktische Größen?

    Ich vermute, dass die meisten realen Anwendungen so etwas wie Folgendes verwenden werden:

    Angenommen, Inhaltsbilder haben auf großen Bildschirmen etwa die Hälfte der Größe des Browserfensters und auf kleinen Bildschirmen die volle Größe des Browserfensters. Lassen Sie die Haltepunkte einfach dort geschehen, wo sie auftreten. Auf diese Weise erhalten Sie immer noch eine ziemlich gute Wahl, ohne sich darum zu kümmern, alle Ihre Medienabfragen genau abzugleichen.

    Und denken Sie daran, dies sind Inhaltsbilder. HTML hält in der Regel länger als CSS oder JS, insbesondere wenn es sich um Inhalte handelt.

    Andere Dinge zu wissen

    Sie können mit srcset auch angeben, ob ein Bild 2x oder 1x ist. Ein wirklich einfacher Anwendungsfall kann also sein:

    Das allein ist ziemlich nützlich. Mischen Sie es nicht mit der Angabe von Breiten. Wie Eric Portis sagt:

    Lassen Sie mich noch einmal betonen, dass Sie zwar Deskriptoren mit 1x / 2x-Auflösung an Quellen in srcsetanstelle von wDeskriptoren anhängen können , 1x / 2x & w jedoch nicht mischen. Verwenden Sie nicht beide gleichzeitig srcset. Ja wirklich.

    Und erinnerst du dich, als ich sagte, die ursprüngliche Bildfüllung sei einfach? Das Neue kann so einfach sein, aber die Elemente im Inneren unterstützen auch srcsetund sizes. Das heißt, Sie können sehr spezifisch werden. Dies fügt eine weitere Ebene hinzu:

    1. Sie entscheiden welche

      Links

      • Martin Wolfs Artikel, der dies inspirierte
      • Picturefill ist die Polyfill, die Sie verwenden möchten.
      • Smashing Magazine Artikel über Picturefill 2.0 von Tim Wright
      • Eric Portis darüber, warum Srcset und Größen existieren und was es besser löst als Medienabfragen
      • Eric Portis mit mehr über das Neue

      Siehe den Testfall Pen srcset & size von Chris Coyier (@chriscoyier) auf CodePen.