Висота блоку залежно від ширини: висота та пропорції на CSS

Опублікував(а): Масальська Анастасія

Оновлено: 20.04.2024

Висота блоку залежно від ширини визначається в різних одиницях CSS: дюймах (in), пікселях (px), пунктах (pt) і т. д., а також у відсотках щодо батьківського блоку або вікна браузера. Встановлення значення height: auto зберігає пропорції зображення та його вміст. Якщо значення не встановлено, використовується значення атрибута height з HTML-розмітки.

Зверніть увагу! Висота елемента, визначена через властивості height, враховує внутрішні та зовнішні відступи, а також рамку border. Якщо властивість box-sizing не задано, розмір внутрішньої області визначається виключно значеннями height і width. Однак, якщо значення box-sizing встановлено, воно визначає, які розміри застосовуються до вказаної області елемента.

Висота блоку, залежно від ширини, чи потрібно встановлювати?

Необов’язково вказувати висоту елементів на вебсторінці. У більшості випадків висота елемента визначатиметься його вмістом та властивостями CSS, такими як відступи та розміри шрифту. Однак, в деяких ситуаціях може знадобитися конкретну висоту для досягнення бажаного візуального ефекту або для забезпечення узгодженого зовнішнього вигляду елементів.

Внутрішній розмір за замовчуванням

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

img {
  border: 5px solid darkblue;
}

<img src="star.png" alt="star">

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

.box {
  border: 5px solid darkblue;
}

<div class="box">

</div>

Привласнення певного розміру

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

.box {
  border: 5px solid darkblue;
  height: 150px;
  width: 200px;
}

<div class="wrapper">
  <div class="box"></div>
  <div class="box">These boxes both have a height set, this box has content in it which will need more space than the assigned height, and so we get overflow. </div>
</div>

Зверніть увагу! Задавати висоту елементів з використанням конкретної довжини чи відсоткового співвідношення слід робити з обережністю через потенційну проблему перекриття.

Використання відсоткового співвідношення

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

.box {
  border: 5px solid darkblue;
  width: 50%;
}

<div class="box">
  I have a percentage width.
</div>

Margins та paddings у відсотках

При використанні відсотків для встановлення відступів (margins) та внутрішніх полів (padding) можна помітити незвичайну поведінку. У прикладі нижче ми маємо блок, де внутрішньому блоку присвоєно відступи (margin) та внутрішні поля (padding) по 10% кожне. Цікаво, що відступи та внутрішні поля зверху та знизу мають такий самий розмір, як відступи ліворуч та праворуч.

.box {
  border: 5px solid darkblue;
  width: 300px;
  margin: 10%;
  padding: 10%;
}

<div class="box">
  I have margin and padding set to 10% on all sides.
</div>

При використанні відступів (margins) та внутрішніх полів (padding), заданих у відсотках, їхнє значення розраховується на основі ширини блоку в горизонтальному напрямку. У нашому прикладі всі відступи та внутрішні поля становлять 10% від ширини блоку. Таким чином, у вас будуть однакові відступи та внутрішні поля по всьому блоку. Цей момент варто враховувати під час використання відсотків.

Висота блоку залежно від ширини – мінімальні та максимальні розміри

CSS дозволяє задавати елементу мінімальну висоту через властивість min-height. Такий блок завжди матиме мінімальну вказану висоту, доки контент у ньому не перевищить це значення.

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

.box {
  border: 5px solid darkblue;
  min-height: 150px;
  width: 200px;
}

<div class="wrapper">
  <div class="box"></div>
  <div class="box">These boxes both have a min-height set, this box has content in it which will need more space than the assigned height, and so it grows from the minimum.</div>
</div>

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

У прикладі нижче наведено використання одного й того самого зображення тричі. Перше зображення має width: 100% та розтягується до ширини контейнера. Друге зображення має max-width: 100% та не розтягується, зберігаючи свої пропорції. Третє зображення також має max-width: 100% і зменшується, щоб поміститися у контейнер.

.box {
  width: 200px;
}
.minibox {
  width: 50px;
}
.width {
  width: 100%;
}
.max {
  max-width: 100%;
}

<div class="wrapper">
  <div class="box"><img src="star.png" alt="star" class="width"></div>
  <div class="box"><img src="star.png" alt="star" class="max"></div>
  <div class="minibox"><img src="star.png" alt="star" class="max"></div>
</div>

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

Одиниці в’юпорту

В’юпорт – це видима область сторінки у браузері. У CSS є одиниці вимірювання, пов’язані з розміром в’юпорт: vw (ширина) і vh (висота). Використовуючи їх, можна регулювати розмір елементів щодо розміру видимої області браузера.

.box {
  border: 5px solid darkblue;
  width: 20vw;
  height: 20vh;
  font-size: 10vh;
}

<div class="box">
  A
</div>

Зміна розмірів vh та vw змінює розмір блоку або тексту залежно від розміру видимої області браузера. Це може бути корисним, наприклад, для створення розділу, який буде відображатися перед іншим вмістом на сторінці.

Висота блоку залежно від ширини, підсумкове рішення

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

До речі! Є нововведення у CSS, що захоплює, це можливість використання меншої кількості зображень у вебдизайні та створення різних фігур прямо в коді. У новій статті нашого порталу наведено приклади, як ми використовуємо CSS у створенні геометричних фігур.

Не пропустите эти статьи

Як зробити адаптивне відео YouTube на CSS

Розглянемо кілька способів, як зробити адаптивне відео YouTube на CSS та помістити на сайт таким…

Блокова модель у CSS: висота блоку та пропорції

Блокова модель CSS (box model) застосовується до елементів, які розглядаються як блоки, визначаючи, як різні…

Використовуємо CSS у створенні геометричних фігур: 13 прикладів нескладних форм

Одне з нововведень у CSS, що захоплює, це можливість використання меншої кількості зображень у веб-дизайні…

Як зробити прелоадер: покроковий спосіб додавання Preloader для сайту

Ми покажемо, як зробити прелоадер у вигляді анімації з появою на екрані під час завантаження.…