Привет, всем будущим фронтенд разработчикам! В этой статье мы разберем как удобно верстать различные карточки. Любая карточка состоит из изображения и контента: Красным выделена верхушка карточки (изображение), а оранжевым контент. Исходя из этого мы можем создать два контейнера: Зачем нам создавать отдельный див для изображения, почему не вставить ее фоном в .card? - Если вставлять ее фоном в .card, мы должны будем вручную высчитывать отступы контента от изображения и решать остальные мелкие проблемы по ходу адаптива наших карточек, а зачем, если можно сделать намного проще...

) В 80% случаев достаточно border-radius + правильной «кадровки» через object-fit: cover. Для нестандартных форм пригодится clip-path или SVG. - База (вставка): \<img src="img.jpg" alt="Описание"> - Адаптивно и без «полоски» снизу: img { max-width: 100%; height: auto; display: block; } - Круглый аватар (лучший способ — через контейнер): .avatar{width:120px;height:120px;border-radius:50%;overflow:hidden} .avatar img{width:100%;height:100%;object-fit:cover;object-position:50% 50%} - Скруглённые углы + аккуратная обрезка (карточки/превью): Скругляйте контейнер и ставьте overflow: hidden, а картинке — object-fit: cover...