Как идеально вписать картинку в блок с HTML и CSS
Как создать плавающий контейнер с градиентом при помощи СSS
Плавающий контейнер может добавить футуристический стиль любому сайту. Многим нравится, когда на сайте присутствует не только голый текст и картинки, но и некая динамика, которая дополняет его и делает интереснее. Мы подумали и решили, что поделимся несколькими советами, как это сделать! В этой статье мы рассмотрим, как добавить на сайт плавающий контейнер. HTML файл: Создание контейнера Переходим в CSS. Далее создаем класс container, в котором мы указываем высоту, ширину экрана и расположение карточки в нем...
Как вписать изображение <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/ Типичный Веб Разработчик