Каталог
Веб-разработка с нуля: четыре курса по порядку.
HTML, затем CSS, JavaScript и SQL. Каждый курс говорит, что нужно знать до него и что вы будете уметь после.
Загружаем курсы…
Каталог
HTML, затем CSS, JavaScript и SQL. Каждый курс говорит, что нужно знать до него и что вы будете уметь после.
Загружаем курсы…
Урок 18 из 53 · 10 мин
block, inline, inline-block, none; visibility; overflow; object-fit; aspect-ratio.
Одни фото квадратные, другие вытянутые. Карточки скачут.
aspect-ratio задаст одну форму, object-fit: cover впишет фото без искажений.
displayblock, inline, inline-block, none, а ещё flex и grid — их разберём отдельно.<style>
a { display: inline-block; padding: 8px 12px; background: #fdf6ec; }
</style>
<a href="#">Меню</a> <a href="#">Бронь</a>visibilityhidden — невидим, но место занимает (в отличие от display: none).<style>
.ghost { visibility: hidden; }
</style>
<p>Раз</p><p class="ghost">Два</p><p>Три — место второго осталось</p>overflowvisible, hidden, auto (прокрутка при необходимости), clip.<style>
.scroll { overflow: auto; width: 160px; white-space: nowrap; background: #fdf6ec; }
</style>
<div class="scroll">Длинная строка, которую можно прокрутить вбок</div>overflow-x · overflow-yobject-fitcover — заполнить, обрезав; contain — целиком.<style>
img { width: 120px; height: 120px; object-fit: cover; }
</style>
<img src="https://picsum.photos/id/431/300/120" alt="Пенал">object-position<style>
img { width: 120px; height: 120px; object-fit: cover; object-position: left; }
</style>
<img src="https://picsum.photos/id/431/300/120" alt="Пенал">aspect-ratio16 / 9, 1 — высота считается от ширины.<style>
.ph { width: 140px; aspect-ratio: 4 / 3; background: #c8763a; }
</style>
<div class="ph"></div>Для одинаковых карточек: aspect-ratio у фото + object-fit: cover.
Сделай фото .card img шириной 100%, с aspect-ratio: 4 / 3 и object-fit: cover.
Выберите один ответ.
Чем display: none отличается от visibility: hidden?
Выберите один ответ.
Какое свойство вписывает картинку в рамку без искажений, обрезая лишнее?
Проверяем состояние обучения…