Соотношение сторон. CSS свойства aspect-ratio и object-fit

Привет. В этом видео рассмотрим как сделать элемент с нужным соотношением сторон и что бы все было адаптивно. CSS свойства aspect-ratio и object-fit.
Заходите в телеграм канал. Там я публикую ссылки на полезные сервисы и макеты для практики верстки.
Приятного просмотра!

Верстку для обзора отправлять сюда:

Обзор верстки подписчиков #1
Верстка адаптивного сайдбара

Телеграм:
Моя страница в ВК:

#html #css #верстка

[sunryser]

Как раз искал решение проблемы с картинками с разным соотношением сторон. Это то что нужно, однозначно лайк. От себя добавлю, чтобы картинка с соотношением сторон 2/3 лучше смотрелась после свойства object-fit: cover, стоит добавить свойство object-postition: top center. Тогда все картинки выглядят естественно.

[augustin]

бро, ты лучший, я уже пересмотрел очень много видео и нигде нормально не объяснили, а посмотрел твоё видео и все сразу решил проблемв

[dreamypioneer]

Когда только начинал верстать было очень непонятно как всё использовать для пропорций) Но, думаю новички с этим видео поймут быстрее олдов)

[progerlife]

учу верстку спасибо за лайфхак! Лайк и подписка!

[wolfcoinru]

Мой мастер не разказал об это функция 👍

[Nikitosss]

Так а что делать если картинка к тебе прилетает с сервака, и ты не знаешь ее ширину и высоту, где ты возьмешь аспект тогда ?

[Фанат-щь]

Очень пригодиться в проектах но только для начала потом будет всё на цмс

[EvgenichTalagaev]

У меня в Chrome object-fit на изображении не хотел работать, пока я изображению не добавил width: 100%