# 133: Wykrywanie responsywnych obrazów - CSS-Tricks

Anonim

Prawdopodobnie jestem trochę rzadki, ponieważ wolę nadążać za responsywnymi obrazami. To interesujący problem, który zaowocował wieloma interesującymi rozwiązaniami. Teraz jednak cała sprawa zaczyna się kończyć, teraz, gdy oficjalne rozwiązania to:

  1. i przyjaciele

  2. Powiedzmy, że jesteśmy na ekranie 1x. Ponieważ powiedzieliśmy przeglądarce, że będziemy używać tych obrazów tak dużych, jak to tylko możliwe (100% obszaru roboczego), „punkty przerwania”, w których przeglądarka odwróci obrazy, będą miały rozdzielczość 1280 pikseli, 640 pikseli, i 320 pikseli, dokładnie takie same rozmiary, jak powiedzieliśmy, że obrazy.

    Jeśli jesteśmy na ekranie 2x, te „punkty przerwania” zostaną przecięte o połowę (niezależnie od tego, co faktycznie zrobimy, aby zmienić rozmiar tych obrazów) i będą miały 640 pikseli, 320 pikseli i 160 pikseli.

    Powiedzmy teraz, że używamy tych samych obrazów, ale wiemy dużo więcej o układzie strony i używamy czegoś takiego:

    Tutaj mówimy (z sizesatrybutem), że jeśli obszar roboczy ma 500 pikseli lub mniej, zamierzamy wyświetlić obraz o szerokości 250 pikseli. Jeśli widoczny obszar jest szerszy, wyświetl obraz o szerokości 500 pikseli.

    To pasowałoby do CSS w ten sposób:

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

    Na ekranie 1x zawsze otrzymasz obraz 320w (mały), gdy obszar roboczy ma 500px szerokości lub mniejszy, a obraz 640w (średni) zawsze otrzymasz, gdy obszar roboczy jest większy. Nigdy nie uzyskasz dużego obrazu, ponieważ może powiedzieć, że nigdy nie będziesz potrzebować tylu pikseli.

    Na ekranie 2x, zawsze otrzymasz obraz 640 w (średni), gdy obszar roboczy ma 500 pikseli szerokości lub mniejszy (ponieważ uważa, że ​​potrzebuje 500 pikseli, a mały nie wystarcza przy 320 pikselach), i zawsze otrzymasz Obraz 1280w (duży), gdy obszar roboczy jest większy. Nigdy nie otrzymasz małego obrazu, ponieważ nigdy nie ma wystarczającej liczby pikseli, aby pokryć to, co powiedziałeś, że chcesz renderować obraz.

    Rzeczywiste rozmiary

    Pamiętaj, że faktyczny rozmiar obrazu nadal zależy od Ciebie. Myślę, że w większości przypadków robisz to przez CSS. A CSS zawsze wygrywa. To, co zadeklarujesz, będzie wyrenderowaną szerokością obrazu, bez względu na to, co się stanie z srcseti tak sizesdalej. To po prostu sprawdza, który obraz zostanie wyświetlony.

    To właśnie sprawia, że ​​atrybut rozmiarów jest nieco trudny. Powiedzmy, że masz coś takiego:

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

    To wcale nie jest niezwykłe. Więc teraz jakiego rozmiaru używasz w sizesatrybucie? To byłoby 13,33% (pomnóż je wszystkie razem), ponieważ ta liczba musi odnosić się do widocznego obszaru, a nie do kontenera. I to nie bierze pod uwagę marginesów, dopełnienia i innych rzeczy na tych kontenerach, więc to trochę przypuszczenie. Wydaje mi się, że w podkowach, granatach ręcznych i atrybucie rozmiarów są bliskie wartości.

    Następnie załóżmy, że pojawia się zapytanie o media, a ciało w rzeczywistości staje się szerokie na 75%. Musisz to wiedzieć, aby móc dostosować wygląd renderowanego rozmiaru obrazów. Twój atrybut rozmiarów może wyglądać następująco:

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

    Następnie przeprowadź to ponownie dla każdego zapytania o układ, które ma wpływ na obrazy treści. Może się to nieco skomplikować.

    Praktyczne rozmiary?

    Podejrzewam, że większość rzeczywistych zastosowań będzie używać czegoś takiego:

    Zakładając, że obrazy treści będą około połowy rozmiaru okna przeglądarki na dużych ekranach i pełnego rozmiaru okna przeglądarki na małych ekranach - po prostu pozwól, aby punkty przerwania pojawiały się tam, gdzie się pojawią. W ten sposób nadal będziesz mieć całkiem przyzwoity wybór, nie rezygnując z dokładnego dopasowania wszystkich zapytań o media.

    Pamiętaj, że są to obrazy treści. HTML zwykle trwa dłużej niż CSS lub JS, zwłaszcza gdy zawiera treść.

    Inne rzeczy, które warto wiedzieć

    Możesz również określić, czy obraz ma rozmiar 2x czy 1x za pomocą srcset. Tak więc naprawdę prostym przypadkiem użycia może być:

    Samo to jest całkiem przydatne. Nie mieszaj tego z określaniem szerokości. Jak mówi Eric Portis:

    I jeszcze raz pozwól mi podkreślić, że chociaż możesz dołączyć deskryptory rozdzielczości 1x / 2x do źródeł srcsetzamiast wdeskryptorów, 1x / 2x & w nie mieszają się. Nie używaj obu w tym samym srcset. Naprawdę.

    Pamiętasz, kiedy powiedziałem, że oryginalne wypełnienie obrazu jest łatwe? Nowe może być takie proste, ale elementy wewnątrz również obsługują srcseti sizes. Oznacza to, że możesz uzyskać bardzo szczegółowe informacje. Dodaje do tego kolejną warstwę:

    1. Ty decydujesz, które

      Spinki do mankietów

      • Artykuł Martina Wolfa, który to zainspirował
      • Picturefill to wypełnienie, którego chcesz użyć.
      • Artykuł w Smashing Magazine na temat Picturefill 2.0 autorstwa Tima Wrighta
      • Eric Portis wyjaśnia, dlaczego Srcset i rozmiary istnieją oraz co rozwiązuje lepiej niż zapytania o media
      • Eric Portis z więcej na temat nowego

      Zobacz testowy zestaw Pen srcset i rozmiary autorstwa Chrisa Coyiera (@chriscoyier) na CodePen.