Підручник із чутливих зображень CSS: Як зробити зображення чуйними за допомогою CSS

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

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

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

Як зробити зображення чуйними за допомогою CSS

Чи слід використовувати відносні або абсолютні одиниці?

Зробити рівномірний образ або реагувати на нього насправді досить просто. Коли ви завантажуєте зображення на свій веб-сайт, воно має стандартну ширину та висоту. Ви можете змінити їх обидва за допомогою CSS.

Щоб зробити зображення чуйним, вам потрібно надати нове значення властивості його ширини. Тоді висота зображення автоматично регулюється.

Важливо знати, що ви завжди повинні використовувати відносні одиниці для властивості width, як відсоток, а не абсолютні, такі як пікселі.

img { width: 500px; }

Наприклад, якщо ви визначите фіксовану ширину 500 пікселів, ваше зображення не буде реагувати - оскільки одиниця вимірювання абсолютна.

img { width: 50%; }

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

Чи слід використовувати медіа-запити?

Одне із запитань, яке мені найбільше задають, - чи варто використовувати медіа-запити чи ні.

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

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

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

@media only screen and (max-width: 480px) { img { width: 100%; } }

Отже, виходячи з правила медіа-запиту, будь-який пристрій розміром менше 480 пікселів буде приймати повний розмір ширини екрана.

Ви також можете переглянути відеоверсію цього допису нижче:

Чому властивість max-width не чудова?

Ще один спосіб, яким розробники можуть створювати чуйні зображення, - це властивість max-width. Однак це не завжди найкращий метод, оскільки він може працювати не для будь-якого розміру екрана чи пристрою.

Перше, що слід зрозуміти, перш ніж рухатись далі на прикладі, це те, що саме робить властивість max-width.

Властивість max-width встановлює максимальну ширину для елемента, яка не дозволяє ширині цього елемента бути більшою за його значення max-width (але вона може бути меншою).

Наприклад, якщо зображення має за замовчуванням ширину 500 пікселів, а якщо розмір екрану - лише 360 пікселів, ви не зможете побачити повне зображення, оскільки місця недостатньо:

img { max-width: 100%; width: 500px; // assume this is the default size }

Отже, ви можете визначити властивість max-width для зображення та встановити його на 100%, що зменшує зображення в 500 пікселів до простору 360 пікселів. Так ви зможете побачити повне зображення на екрані меншого розміру.

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

На жаль, розмір екрану стане дещо більшим, ніж 500 пікселів, але зображення цього не зробить, оскільки за замовчуванням він має ширину 500 пікселів. Такий підхід порушить чуйність зображення.

Щоб це виправити, потрібно знову використовувати властивість width, що робить властивість max-width марною.

А як щодо висоти?

Інша поширена проблема, з якою ви можете зіткнутися, пов’язана з властивістю висоти. Зазвичай висота зображення автоматично змінюється сама, тому вам не потрібно призначати зображенням властивість висоти (оскільки це начебто ламає зображення).

Але в деяких випадках, можливо, доведеться працювати з зображеннями, які повинні мати фіксовану висоту. Отже, коли ви призначаєте фіксовану висоту зображення, воно все одно буде чуйним, але воно буде виглядати погано.

img { width: 100%; height: 300px; }

На щастя, існує ще одна властивість, яку CSS пропонує для вирішення цієї проблеми ...

Рішення: властивість об’єкта

Щоб мати більший контроль над вашими зображеннями, CSS надає ще одну властивість, яка називається об’єктом придатності. Давайте використаємо властивість object-fit та призначимо значення, яке покращить ваше зображення:

img { width: 100%; height: 300px; object-fit: cover; object-position: bottom; }

За потреби ви також можете використовувати властивість object-position (на додаток до fit-fit) для фокусування на конкретній частині зображення. Багато людей не знають про властивість об’єкта, але це може бути корисним для вирішення подібних проблем.

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

Дякую за читання!