# 133: Определение адаптивных изображений - CSS-хитрости

Я, наверное, немного редко, потому что мне скорее нравилось пытаться не отставать от адаптивных изображений. Это интересная проблема, которая породила множество интересных решений. Теперь все начинает заканчиваться, теперь, когда официальные решения:

1. и друзья
2. 

   Допустим, у нас экран 1x. Поскольку мы сказали браузеру, что будем использовать эти изображения настолько большими, насколько это возможно (100% области просмотра), «точки останова», когда браузер откроет изображения, будут на 1280 пикселей, 640 пикселей, и 320 пикселей, тех же размеров, что и изображения.

   Если мы находимся на экране с 2-кратным увеличением, эти «точки останова» уменьшатся вдвое (независимо от того, что мы на самом деле делаем для изменения размера этих изображений) и будут иметь размер 640 пикселей, 320 пикселей и 160 пикселей.

   Теперь предположим, что мы используем те же изображения, но мы знаем намного больше о макете нашей страницы и использовали что-то вроде этого:

   Здесь мы говорим (с sizesатрибутом), что если область просмотра составляет 500 пикселей или меньше, мы намерены отображать изображение с шириной 250 пикселей. Если область просмотра шире, отобразите изображение шириной 500 пикселей.

   Это соответствовало бы CSS вот так:

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

   На экране 1x вы всегда будете получать изображение 320w (маленькое), когда область просмотра имеет ширину 500 пикселей или меньше, и вы всегда получите изображение 640w (среднее), когда область просмотра больше. Вы никогда не получите большое изображение, потому что оно может сказать, что вам никогда не понадобится такое количество пикселей.

   На экране 2x вы всегда будете получать изображение 640w (среднее), когда область просмотра имеет ширину 500 пикселей или меньше (потому что он считает, что ему нужно 500 пикселей, а маленького недостаточно при 320 пикселей), и вы всегда получите Изображение 1280 Вт (большое), когда область просмотра больше. Вы никогда не получите маленькое изображение, потому что никогда не бывает достаточно пикселей, чтобы покрыть то, что вы сказали, что собираетесь визуализировать изображение.

   Фактический размер

   Помните, что фактический размер изображения все еще зависит от вас. Я думаю, что в большинстве случаев вы делаете это через CSS. И CSS всегда выигрывает. То, что вы объявляете, будет визуализированной шириной изображения независимо от того, что происходит с элементами srcsetи sizesпрочее. Это просто определяет, какое изображение будет показано.

   Это то, что делает атрибут размеров немного жестким. Допустим, у вас есть что-то вроде:

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

   В этом нет ничего необычного. Итак, какой размер вы используете в sizesатрибуте? Это будет 13,33% (умножьте их все вместе), потому что это число должно относиться к области просмотра, а не к контейнеру. И это не учитывает поля, отступы и прочее на этих контейнерах, так что это своего рода предположение. Я предполагаю, что близкое количество подков, ручных гранат и атрибутов размеров.

   Затем предположим, что приходит медиа-запрос, и тело на самом деле становится шириной 75% сверх всего этого. Вы должны знать это, чтобы вы могли настроить то, каким, по вашему мнению, будет визуализированный размер изображений. Атрибут размеров может быть таким:

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

   Затем повторите это для каждого медиа-запроса макета, который влияет на изображения содержимого. Это может быть немного сложно.

   Практические размеры?

   Я подозреваю, что в большинстве случаев в реальном мире будет использоваться что-то вроде:

   Предполагая, что изображения содержимого будут примерно вдвое меньше размера окна браузера на больших экранах и полного размера окна браузера на маленьких экранах - просто позвольте точкам останова возникать там, где они есть. Таким образом, вы все равно получите довольно приличный выбор, не тратя времени на точное сопоставление всех ваших медиа-запросов.

   И помните, что это изображения содержания. HTML имеет тенденцию длиться дольше, чем CSS или JS, особенно когда это контент.

   Еще что нужно знать

   Вы также можете указать размер изображения 2x или 1x с помощью srcset. Итак, действительно простой вариант использования может быть следующим:

   Уже одно это очень полезно. Не путайте это с указанием ширины. Как говорит Эрик Портис:

   И снова позвольте мне подчеркнуть, что, хотя вы можете прикреплять дескрипторы разрешения 1x / 2x к источникам srcsetвместо wдескрипторов, 1x / 2x & w не смешиваются. Не используйте оба вместе srcset. Действительно.

   И помните, когда я сказал, что с оригинальной картинкой было легко? Новое может быть таким простым, но элементы внутри также поддерживают srcsetи sizes. Это означает, что вы можете быть очень конкретными. Он добавляет к этому еще один слой:

   1. Вы решаете, какие

      Ссылки

      • Статья Мартина Вольфа, вдохновившая
      • Picturefill - это полифил, который вы хотите использовать.
      • Статья Тима Райта в Smashing Magazine о Picturefill 2.0
      • Эрик Портис о том, почему существует Srcset и sizes и что он решает лучше, чем медиа-запросы
      • Эрик Портис с подробностями о новом

      См. Тестовый пример Pen srcset & sizes от Криса Койера (@chriscoyier) на CodePen.