Соотношение сторон. CSS свойства aspect-ratio и object-fit
HTML-код
- Опубликовано: 20 сен 2024
- Привет. В этом видео рассмотрим как сделать элемент с нужным соотношением сторон и что бы все было адаптивно. CSS свойства aspect-ratio и object-fit.
Заходите в телеграм канал. Там я публикую ссылки на полезные сервисы и макеты для практики верстки.
Приятного просмотра!
Верстку для обзора отправлять сюда:
t.me/joinchat/...
Обзор верстки подписчиков #1
• Обзор верстки подписчи...
Верстка адаптивного сайдбара
• Верстка адаптивного са...
Телеграм:
t.me/vimpdev
Моя страница в ВК:
bit.ly/3m33aku
#html #css #верстка
Как раз искал решение проблемы с картинками с разным соотношением сторон. Это то что нужно, однозначно лайк. От себя добавлю, чтобы картинка с соотношением сторон 2/3 лучше смотрелась после свойства object-fit: cover, стоит добавить свойство object-postition: top center. Тогда все картинки выглядят естественно.
Когда только начинал верстать было очень непонятно как всё использовать для пропорций) Но, думаю новички с этим видео поймут быстрее олдов)
Только один момент. Тут же явно всё рассчитано на современные браузеры.
я не новичок, но видео был полезным
бро, ты лучший, я уже пересмотрел очень много видео и нигде нормально не объяснили, а посмотрел твоё видео и все сразу решил проблемв
Классно. Это стимулирует меня продолжать делать видосы)
Прикольно, хорошее видео. Доходчивое объяснение, приятно смотреть. Спасибо
спасибо. Ты молодец
Спасибо)
ты классный!))
Ой какая милота) Спасибо)
Благодарю за ролик!
Спасибо, всё доступно и понятно.
учу верстку спасибо за лайфхак! Лайк и подписка!
Спасибо)
Ответ на мой вопрос !!! Спасибо.
super, just that what i need
Очень полезное видео!
Классный лайфхак! Спасибо!
Мой мастер не разказал об это функция 👍
🔥🔥🔥🔥🔥🔥🔥🔥
👍👍👍👍👍💯💯💯💯💯
Очень пригодиться в проектах но только для начала потом будет всё на цмс
Картинки в постах это всего лишь один пример использования
Так а что делать если картинка к тебе прилетает с сервака, и ты не знаешь ее ширину и высоту, где ты возьмешь аспект тогда ?
У меня в Chrome object-fit на изображении не хотел работать, пока я изображению не добавил width: 100%
Еще не помешает добавить высоту в 100%
кто то очень любит помидоры
Обижаешь)
Обижаешь)
Ты сам камрад, зачем обзываешься?