arrow-left
Вернуться к продуктам
Кратко о видео
В уроке разобрана вёрстка логотипа в хедере: виджет Image, опция «Вмещать» для корректного масштабирования, ширина auto + фиксированная высота 54px, обёртка в div через Shift+A. Добавление навигационных ссылок и кнопки в хедер через Flex. Правило логотипа: высота фиксируется в пикселях (54px), ширина — авто. Это сохраняет пропорции изображения при любом контентном размере. Ширина авто убирает фиксированное значение из поля — без этого логотип деформируется. Урок из серии «Собираем шапку для сайта» — часть 4. Если не смотрел предыдущие части, начни с части 1, где разбирается базовая структура хедера с Flex и позиционирование элементов. Этот урок продолжает с того места, где остановились.

Собираем шапку для сайта в Taptop: часть 4

Добавляешь логотип в шапку — и он или слишком большой, или обрезается. Как задать правильный размер? Почему нельзя просто поставить ширину и высоту в пикселях?
Правильный размер логотипа: ширина — auto, высота — в пикселях (54px). Логотип масштабируется пропорционально по высоте. Опция «вмещать» предотвращает обрезание при нестандартных пропорциях изображения. Для новичков, которые собирают шапку по серии. После просмотра логотип выглядит правильно на всех экранах.
Тайминги видео
00:00 — Image для логотипа: вмещать, авто-ширина 01:30 — Название и описание рядом с логотипом 02:30 — Обёртка в div и финальная структура

Другие продукты академии

Как выйти на фриланс
Разберётесь, как брать первые проекты, называть цену и общаться с клиентами
Для кого
Специалистов
Направление
Фриланс
Формат
Мини-курс
Длительность
13 уроков
Taptop с нуля: сайт-портфолио
Осваиваете базу Taptop и собираете сайт-портфолио, который можно оставить себе
Для кого
Новичков
Направление
Вёрстка
Формат
Мини-курс
Длительность
9 уроков
Как дизайнеру понять вёрстку
Разберётесь, как устроены сайты, чтобы увереннее работать с ними дальше
Для кого
Новичков
Направление
Вёрстка
Формат
Интенсив
Длительность
2 урока
Как собрать сложную анимацию
Собираете сложную анимацию и плавный переход между страницами
Для кого
Для тех, кто в теме
Направление
Анимации
Формат
Интенсив
Длительность
2 урока