Как вписать изображение <img> в контейнер? В идеальных условиях разработчик просто берет картинку и она всегда точно встает в вёрстку. Но в реальности все не так. Как правило, картинки всегда имеют разные пропорции сторон. Существует множество "костылей" чтобы вписать изображение, например с помощью flex-box или position + transform, или, например, background-image: <style> .card { width: 100px; height: 100px; background-image: url("logo.png"); background-size: contain; background-position 50% 50%; } </style> <div class="card"></div> Таким образом, независимо от пропорций картинки, она всегда красиво вписывается в контейнер. В современной верстке рекомендуется использовать object-fit object-position, они определяют размер и положение изображения внутри контейнера. Например, вписать картинку можно следующим образом: <style> .card { width: 100px; height: 100px; } .logo { width: 100%; height: 100%; object-fit: contain; object-position: 50% 50%; } </style> <div class="card"> <img class="logo" src="./images/logo.png"> </div> Object-fit object-position - поддерживается всеми современными браузерами, для очень старых есть полифил. Документация - https://html5book.ru/svoystva-object-fit-i-object-position/ Типичный Веб Разработчик

Как вписать блоки в страницу или в контейнер? Используйте css grid Я на днях обнаружил печальную вещь. Хотя стандарт css grid существует не первый год, многие до сих пор то ли не знают о нем, то ли не понимают, для чего он нужен. Я крайне редко вижу его практическое использование.При этом существует задача, которая нормальным образом решается только через grid. Речь идет о вписывании верстки в родительский контейнер, будь то виджет или страница в целом. В итоге создание подобной верстки происходит либо с помощью костылей (если использовать обычную блочную верстку (когда ее уже пометят как obsolete?)), либо с помощью избыточного кода (если использовать flex). Давайте я покажу на пример, как это делать правильно.Вот типичная задача - нужно сделать страницу с верхним и нижним тулбаром, и центром, который должен скроллится: Читать далее https://habr.com/ru/articles/772834/?utm_source=habrahabr&utm_medium=rss&utm_campaign=772834