Зображення можна зробити адаптивним за допомогою CSS і встановлення ширини зображення у відсотках від його батьківського контейнера, а не фіксованого значення пікселів. Таким чином, коли розмір батьківського контейнера змінюється (наприклад, через різні розміри екрана), розмір зображення також змінюватиметься пропорційно.

Використання CSS Grid У цьому підході ми визначте контейнер сітки за допомогою властивості display: grid. Потім ми вказуємо кількість стовпців за допомогою властивості grid-template-columns, яка має значення repeat(auto-fit, minmax(200px, 1fr)), щоб створити адаптивну сітку з мінімальною шириною стовпця 200 пікселів.

Використовуйте медіа-запити CSS: Найпоширеніший спосіб зробити веб-сайт адаптивним – використовувати медіа-запити CSS. Використовуючи медіа-запити, ви можете визначити різні стилі CSS для різних розмірів екрана. Наприклад, ви можете вказати різні розміри шрифту або ширину стовпців для мобільних пристроїв і настільних пристроїв.

Основною властивістю CSS, що відповідає за круглу форму, є властивість border-radius. Встановивши радіус кутів на 50% від ширини/висоти, ви отримаєте коло.

Властивість padding-bottom використовується для визначення висоти прямокутника, яка встановлюється такою самою, як ширина за допомогою значення у відсотках. Використання того самого відсотка для ширини та висоти зробить поле квадратом.