Розмір картинки в html: як ним керувати?

32

Від автора: вітаю вас. Картинки — практично один з найбільш важливих елементів на веб-сторінках. Завдяки їм нам значно простіше і цікавіше сприймати те, що ми бачимо на екрані. Але якщо заводити мову про їх вбудовуванні в веб-сторінки, потрібно знати як мінімум те, як керувати розміром картинки в html. Саме про це ми сьогодні поговоримо.

Способи задати розмір зображень

Будемо дивитися все на дуже простому прикладі. Ось такий код:

Розмір картинки в html: як ним керувати?

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

#img{
width: 200px;
height: 160px;
border: 2px solid red;
}

Отже, ширина блоку — 200 пікселів, а висота — 160. І ось нам потрібно, щоб в нього вписалося фото. Але величини її, припустимо, ми не знаємо. Ну гаразд, я можу вам сказати, що я зробив приблизно 300 на 200 пікселів, в такому випадку фото просто не влізе в блок. Давайте подивимося, що буде:

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

Припустимо, що фото лежить на сервері і змінити безпосередньо її ширину і висоту не можна. У такому разі один з варіантів — поставити фіксовану ширину і висоту картинці з допомогою атрибутів тега img: width і height.

Розмір картинки в html: як ним керувати?

Ось, тепер все ідеально вписалася в блок, тому що тепер має такі ж параметри, як і він сам. Але пам’ятайте одну важливу деталь: якщо ви самі прописуєте і ширину і висоту, то, швидше за все, порушуєте пропорції. Щоб не порушувати їх, потрібно прописати тільки одне значення (ширину). Тоді друге браузер сам вважатиме, не порушуючи пропорцій.

Розмір картинки в html: як ним керувати?

Тепер зображення по висоті займає не все доступне місце, але зате її пропорції не порушені.

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

В css правила можна задати як окремої картинці (виділивши її ідентифікатором), групі (прописавши кожного зображення клас чи з допомогою інших доступних селекторів) або відразу всім, звернувшись по селектору img.

Як зробити в css адаптивні картинки?

Для цього вже давно веб-розробники і верстальники використовують такий досить простий код:

img{
max-width: 100%;
height: auto;
display: block;
}

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

Якщо видалити атрибут width з html-коду, то результат будемо аналогічним:

Але зауважте, що при зміні розмірів блоку-контейнера зображення розтягується вже на нові розміри, без порушення пропорцій. При цьому, якщо ви спробуєте зменшити розміри блоку, картинка не вийде за нього, а так само слухняно буде вписуватися в нього по ширині. Ось таким чином ми робимо «гумові» і, по суті, адаптивні картинки.

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