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

Привет. В этом видео рассмотрим как сделать элемент с нужным соотношением сторон и что бы все было адаптивно. CSS свойства aspect-ratio и object-fit.
Заходите в телеграм канал. Там я публикую ссылки на полезные сервисы и макеты для практики верстки.
Приятного просмотра!
Верстку для обзора отправлять сюда:
t.me/joinchat/...
Обзор верстки подписчиков #1
• Обзор верстки подписчи...
Верстка адаптивного сайдбара
• Верстка адаптивного са...
Телеграм:
t.me/vimpdev
Моя страница в ВК:
bit.ly/3m33aku
#html #css #верстка

[@sunryser4484]

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

[@dreamypioneer3760]

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

[@dreamypioneer3760]

Только один момент. Тут же явно всё рассчитано на современные браузеры.

[@softwareDevFromAlmaty]

я не новичок, но видео был полезным

[@augustin6666]

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

[@VIMPdev]

Классно. Это стимулирует меня продолжать делать видосы)

[@808beno7]

Прикольно, хорошее видео. Доходчивое объяснение, приятно смотреть. Спасибо

[@MagomedKhadzhiev-yi6kd]

спасибо. Ты молодец

[@VIMPdev]

Спасибо)

[@АлмазФахрутдинов-м9п]

ты классный!))

[@VIMPdev]

Ой какая милота) Спасибо)

[@Ronghanes]

Благодарю за ролик!

[@jonimonik6575]

Спасибо, всё доступно и понятно.

[@progerlife6690]

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

[@VIMPdev]

Спасибо)

[@Olgitatata]

Ответ на мой вопрос !!! Спасибо.

[@ОльгитаТатарченко-ъ2э]

super, just that what i need

[@IlyaDevN]

Очень полезное видео!

[@_Fantom_.]

Классный лайфхак! Спасибо!

[@КЫРГЫЗСТАН-п1е]

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

[@НаталияСлободянюк-в7э]

🔥🔥🔥🔥🔥🔥🔥🔥

[@ГалинаХудиеа]

👍👍👍👍👍💯💯💯💯💯

[@Фанат-щ9ь]

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

[@VIMPdev]

Картинки в постах это всего лишь один пример использования

[@Nikitosss91]

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

[@EvgenichTalagaev]

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

[@VIMPdev]

Еще не помешает добавить высоту в 100%

[@deneaz]

кто то очень любит помидоры

[@VIMPdev]

Обижаешь)

[@VIMPdev]

Обижаешь)

[@ПожилойБилибоба]

Ты сам камрад, зачем обзываешься?