Від автора: Вітаю вас в нашій серії уроків CSS від А до Я! В цій серії я розповім вам про CSS значення і властивості, які починаються з різних букв алфавіту. Іноді навчального ролика буває недостатньо, і в цій статті я дам вам кілька швидких рад по роботі зі значенням auto.
A значить auto
Значення auto вкрай зручно для автоматичного підстроювання контенту на веб-сторінці. У даного значення безліч способів застосування. Його можна використовувати для зберігання контенту, що виходить за межі контейнера, як альтернативу clearfix, для збереження пропорцій зображень і навіть для центрування контенту на сторінці. З допомогою трьох простих порад я навчу вас все це робити.
Порада 1
Значення auto дуже корисно в тих випадках, коли контент виходить за межі контейнера. За допомогою властивості overflow: auto можна утримати контент всередині контейнера, але коли вміст перевищує розміри блоку, буде з’являтися смуга прокрутки.
.content-box {
width: 300px;
height: 300px;
border: 1px solid #cc3f85;
overflow: auto;
}
Видаліть в CodePen демо вище властивість overflow, і ви побачите, що стане з контентом, не влезающим в блок.
Порада 2
Властивість overflow: auto можна також використовувати замість clearfix’а. Дана властивість створює новий блоковий контекст форматування, у якому є свої обтікання, що запобігає контейнер від схлопування. У деяких випадках дана властивість працює навіть краще ніж overflow: hidden.
.container {
width: 600px;
border: 4px solid #9be22d;
overflow: auto;
}
.blue-box {
float: left;
width: 200px;
height: 200px;
background-color: #66d9ef;
}
.pink-box {
float: right;
width: 200px;
height: 200px;
background-color: #cc3f85;
}
Видаліть в демо вище властивість overflow, і блок схлопнется.
Порада 3
Значення auto можна використовувати для збереження співвідношення сторін зображень. Якщо вам необхідно змінити розмір зображення всередині контейнера, задайте ширину або висоту (по відношенню до контейнера), а друге значення встановіть auto. Так ви збережете пропорції зображення.
.image-holder {
width: 50%;
border: 1px solid;
}
img {
width: 40%;
height: auto;
}
Зменшіть розмір вікна браузера, щоб побачити, як зображення зберігає правильне співвідношення сторін у CodePen демо.
