Економія часу CSS-методи для створення чуйних зображень

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

Ця ситуація траплялася зі мною багато разів, і я вчився на своїх помилках. Немає більше хакі з чорною магією - ось мої п’ять улюблених прийомів для обробки розміру зображення.

"OMG, Я ПОТРІБУЮ ЦЕ СКОРІЙ"

У п’ятницю 17:00, вам потрібно закінчити цю сторінку, але зображення не відповідатимуть макету. Настав час скористатися вашим магічним трюком!

.myImg { background-image: url("my-image.png"); background-size: cover; }

Звучить знайомо? Ми всі зробили це один раз, чи не схоже на вас обдурити?

Використовувати backgroundвластивості дуже корисно, вони просто працюють. Однак пам’ятайте, що ви повинні використовувати їх лише для зображень, що не містять вмісту, або як заміну тексту, а в деяких окремих випадках.

Шлях із майбутнього

Що, якби я сказав вам, що така магія існує і для елементів? Скажіть "привіт" властивості object-fit - яка, до речі, також працює для відео!

.myImg { object-fit: cover; width: 320px; height: 180px; }

Це все, шановні! Подивіться, як, коли ми отримуємо дружнє значення cover, ми також можемо використовувати contain.

Гаразд, у чому пастка?

На жаль, object-fitце не спрацює з IE та старішими версіями Safari, але є polyfill.

Шлях "Netflix"

Ви можете подумати “хороший трюк, ще один спосіб, який не працює у старих браузерах, таких як IE?”. Не хвилюйтеся, цей працює скрізь, і він мій улюблений! Вам потрібно буде обернути своє зображення відносно підбитим батьком.

Ми збережемо співвідношення зображень у відсотках щодо paddingвластивості. Ваше зображення буде повноцінним повноцінним дитиною.

Код виглядає так:

.wrapper { position: relative; padding-top: 56.25%; /* 16:9 Aspect Ratio */ } img { position: absolute; left: 0; top: 0; width: 100%; height: auto; }

"Гей, людино, це виглядає складно".

Отримавши концепцію, техніка стала простою та широко застосовуваною. Netflix використовує це!

Невелика демонстрація:

Простий спосіб

Ви вже можете знати цей:

img { height: auto; width: 100%; /* even more control with max-width */ max-width: 720px; }

Якщо ваш макет не надто складний, він працює в більшості випадків.

Шлях продуктивності (Додатково)

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

Чи знали ви, що в сучасних браузерах ви можете змінити джерело зображення залежно від ширини сторінки? Ось для чого srcsetстворено!

Ви можете комбінувати їх із тегом HTML 5 , який витончено погіршує показник .

Підсумувати

  1. Використовуйте, background-image якщо ваше зображення не є частиною вмісту сторінки.
  2. Використовуйте, object-fitякщо ви не дбаєте про IE.
  3. Техніка оббитого контейнера, яку використовує Netflix, працює скрізь.
  4. У більшості випадків просто додайте height: auto;свій CSS.
  5. Якщо вам потрібен швидкий час завантаження, використовуйте srcsetдля завантаження менших зображень на мобільний телефон.