Як веб-розробнику, часто соромно працювати з елементами HTML, які самі по собі - на відміну від елемента img, наприклад - не мають ні фіксованого розміру, ні фіксованого співвідношення сторін. Часто потрібно домогтися того, щоб ці об'єкти поводились чуйно, але пропорція між шириною та висотою зберігалася. CSS за замовчуванням не пропонує тут інтуїтивного рішення. Але за допомогою властивості вертикального заповнення ви можете досягти своєї мети.
Візьмемо повсякденний приклад квадратних зображень статей, графіка яких не обов’язково квадратна, але ми хотіли б відображати їх із співвідношенням сторін 1: 1 без додаткових зусиль і, перш за все, без спотворень, завдяки чому їх ширина (а отже, і висота) швидко змінюються повинен. За допомогою наступного коду це дуже легко зробити без додаткової розмітки за допомогою CSS:
1bc3a80de3db90cdf0535541236d95f2
з результатом
Але чому це працює і як можна створити інші пропорції? Ключ до цього полягає у властивості padding, яке - наведене у відсотках - завжди базується на тому ж основному значенні, що і властивість Width (а саме ширина батьківського елемента). Для відступів ліворуч та відступів праворуч це очевидно, а відступ зверху та відступ знизу дивно, але в цьому випадку дуже корисний.
Наприклад, якщо потрібно співвідношення сторін 16: 9, ви вибираєте значення width: 100%; padding-bottom: 56.25%;. Співвідношення сторін, яке враховує золотий перетин, - це ширина: 100%; нижнє покриття: 61,81%; здійсненний.
За допомогою calc ви можете безпосередньо вказати співвідношення сторін, наприклад для 16: 9 з відступом-дно: calc (1 / (16/9) * 100%). Якщо елемент складається з подальших, вкладених елементів, дочірній елемент розташовується абсолютно для компенсації відступів батьківського елемента:
1bc3a80de3db90cdf0535541236d95f2
Це призводить до наступного результату: