Ви можете зберегти співвідношення сторін за допомогою вказуючи лише ширину та встановлюючи висоту автоматично за допомогою властивості CSS. Це призведе до відтворення зображення шириною 400 пікселів. Висота регулюється відповідно, щоб зберегти співвідношення сторін вихідного зображення.
У CSS для <div>, додайте відсоткове значення для padding-bottom і встановіть відносну позицію, це збереже співвідношення сторін контейнера. Значення заповнення визначає співвідношення сторін. тобто 56,25% = 16:9.
Щоб змінити розмір зображення, не розтягуючи його, слід залишити незмінним співвідношення сторін — пропорцію між шириною та висотою зображення. Більшість інструментів редагування мають опцію «зберігати співвідношення сторін» під час зміни розміру, яка автоматично регулює висоту, коли ви змінюєте ширину, і навпаки.
Використання CSS для збереження співвідношення сторін div забезпечує адаптивний дизайн, зберігаючи цілісність вмісту на різних розмірах екрана. Установивши відповідні значення `padding-top`, ви можете легко досягти різних пропорцій, наприклад 4:3 або 16:9.
просто клацніть лівою кнопкою миші на зображенні, щоб вибрати його. Потім у вікні «Властивості» встановіть для «Заблокувати пропорції» значення «true».. Ви також можете зберегти співвідношення сторін, натиснувши клавішу Ctrl під час зміни розміру фігури. Давайте тепер розглянемо приклад, щоб краще зрозуміти.