Как вписать изображение <img> в контейнер? В идеальных условиях разработчик просто берет картинку и она всегда точно встает в вёрстку. Но в реальности все не так. Как правило, картинки всегда имеют разные пропорции сторон. Существует множество "костылей" чтобы вписать изображение, например с помощью flex-box или position + transform, или, например, background-image: <style> .card { width: 100px; height: 100px; background-image: url(./images/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/ Типичный Веб Разработчик