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