# 133: Виявлення чуйних зображень - CSS-хитрощі

Anonim

Я, мабуть, трохи рідкісний у тому, що мені дуже сподобалося намагатися не відставати від чуйних зображень. Це цікава проблема, яка породила багато цікавих рішень. Усе це починає завершуватись зараз, тепер, коли офіційні рішення такі:

  1. та друзів
  2. Скажімо, ми на екрані 1x. Оскільки ми сказали браузеру, що будемо використовувати ці зображення якомога більшими (100% області перегляду), "точки зупинки", коли браузер виверне зображення, відбуватимуться з 1280px, 640px, і 320px, таких самих розмірів, як ми вже говорили, що це зображення.

    Якщо ми знаходимося на екрані 2x, ці "точки зупинки" скоротяться навпіл (незалежно від того, що ми насправді робимо для розміру цих зображень) і становитимуть 640px, 320px та 160px.

    Тепер, скажімо, ми використовуємо ті самі зображення, але ми знаємо набагато більше про макет нашої сторінки і використовували щось подібне:

    Тут ми говоримо (з sizesатрибутом), якщо область перегляду становить 500 пікселів або менше, ми маємо намір відобразити зображення із шириною 250 пікселів. Якщо область перегляду ширша за цю, відображайте зображення із шириною 500 пікселів.

    Це відповідало б такому CSS:

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

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

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

    Фактичний розмір

    Пам'ятайте, що фактичний розмір зображення все ще залежить від вас. Я вважаю, що в більшості випадків ви робите це через 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 та розміри та що це вирішує краще, ніж медіа-запити
      • Ерік Портіс з докладнішими відомостями про нове

      Перегляньте тестовий кейс Pen srcset & розміри від Chris Coyier (@chriscoyier) на CodePen.