Калькулятор пропорцій зображень: 16:9, 4:3 та кастомні

Що таке пропорції зображення?

Пропорції (aspect ratio) — це співвідношення ширини до висоти зображення або відеозапису. Найпоширеніші: 16:9 (широкоформатне відео, YouTube), 4:3 (старі монітори і телевізори), 1:1 (Instagram квадрат), 9:16 (Stories і Reels), 3:2 (фотографії DSLR). Знання пропорцій критично для адаптивного дизайну.

Практичні застосування

Розрахунок розмірів для різних соцмереж. Підготовка зображень для верстки без спотворень. Налаштування відеоплеєрів. Збереження пропорцій при зміні розміру. CSS-властивість aspect-ratio: 16/9 дозволяє зберігати пропорції елементів без JavaScript.

CSS aspect-ratio

Сучасний CSS дозволяє легко задавати пропорції: aspect-ratio: 16 / 9. До появи цієї властивості використовувався прийом «padding-top hack»: padding-top: 56.25% для 16:9. Тепер нативна властивість підтримується у всіх сучасних браузерах і є переважним способом.

Зображення в адаптивному дизайні

object-fit: cover заповнює контейнер зображенням без спотворення (може обрізати). object-fit: contain — вписує зображення повністю (можуть з'явитися поля). object-position задає, яка частина зображення залишається видимою при обрізанні. Разом із aspect-ratio це дає повний контроль над відображенням зображень.