Разработчики устанавливают положение изображения, чтобы установить четкую визуальную иерархию, определяя порядок и размеры изображения относительно других элементов HTML. Размещая изображение в различных позициях, можно создавать современные, уникальные и индивидуальные дизайны, которые могут изменить внешний вид веб-сайта. В этой статье демонстрируется процедура установки положения изображения с помощью CSS.
Как установить положение изображения в CSS?
Установив положение изображения в CSS, такие преимущества, как « точное размещение », « перекрывающийся элемент ' и ' адаптивный дизайн » может быть легко достигнуто. Используя эти преимущества, разработчики могут легко настроить и создать полнофункциональный и привлекательный веб-сайт. Есть два метода/свойства, с помощью которых можно установить положение изображения. Эти свойства описаны ниже:
Метод 1: использование свойства с плавающей запятой
“ плавать » предоставляется CSS для перемещения элементов HTML в « левый ' или ' верно ' направление. Он в основном используется при создании адаптивного макета для точного размещения элементов HTML.
Например, свойство float используется для выравнивания изображений как по левой, так и по правой стороне веб-страницы:
< див >
< изображение источник '=' 'bg.jpg' высота '=' '300 пикселей' ширина '=' '400 пикселей' сорт '=' 'позицияПраво' >
< изображение источник '=' 'книга.jpg' высота '=' '300 пикселей' ширина '=' '400 пикселей' сорт '=' 'позиция слева' >
див >
В приведенном выше коде:
-
- Во-первых, корень» див », который работает как контейнер для HTML-элементов.
- Далее два ' <изображение> » теги используются внутри « <дел> ' ярлык.
- После этого значения « 300 пикселей ' и ' 400 пикселей » предоставляются « высота ' и ' ширина ” атрибуты обоих ” <изображение> ” теги.
- Кроме того, назначьте класс « позицияПраво ' и ' позицияСлева » к первому и второму тегу «
» соответственно.
Теперь введите « <стиль> », чтобы применить следующие свойства CSS:
< стиль >.positionRight {
поплавок: справа;
}
.positionLeft {
плыть налево;
}
стиль >
Описание приведено ниже:
-
- Сначала выберите « позицияПраво ” и установите значение “ верно 'к своему' плавать ' свойство. Это перемещает выбранный элемент HTML в правильном направлении на веб-странице.
- Далее выберите « позицияСлева » и укажите значение « левый ” к “ плавать ' свойство. Это перемещает элемент влево.
После окончания этапа компиляции:
Вывод показывает, что изображения были установлены в левую и правую позиции.
Способ 2: использование свойства object-position
“ позиция объекта ” обеспечивает размещение изображения или HTML-элемента в определенной позиции на веб-странице. Он дает контроль над горизонтальным и вертикальным позиционированием, позволяя пользователю достичь желаемого визуального эффекта или макета. Он в основном используется разработчиками для обрезки изображений, создания миниатюр, пользовательских макетов и т. д.
Это свойство может принимать как числовые, так и ключевые значения. Например, для « позиция объекта ' свойство. Он устанавливает положение изображения в CSS в приведенном ниже фрагменте кода:
< стиль >.numericalValues
{
положение объекта: 100px 20px;
}
.keywordValues
{
положение объекта: слева;
}
стиль >
< тело >
< див >
< изображение источник '=' 'книга.jpg' высота '=' '300 пикселей' ширина '=' '400 пикселей' сорт '=' 'значения ключевого слова' >
< изображение источник '=' 'bg.jpg' высота '=' '300 пикселей' ширина '=' '400 пикселей' сорт '=' 'числовые значения' >
див >
тело >
В приведенном выше фрагменте кода:
-
- Во-первых, « числовые значения » класс выбирается внутри « <стиль> ' ярлык. И числовые значения « 100 пикселей 20 пикселей ” предоставляются CSS “ позиция объекта ' свойство. “ 100 пикселей ” – это пространство, добавленное в горизонтальном направлении, а “ 20 пикселей » для вертикали.
- Далее « ключевые словаЗначения выбран класс », а значение ключевого слова « левый » предоставляется « позиция объекта », чтобы выровнять изображение по левому краю.
- После этого внутри « <тело> ” создаются два изображения, и им назначаются созданные выше классы.
После завершения этапа компиляции веб-страница выглядит так:
Снимок показывает, что изображения теперь установлены в определенных позициях.
Заключение
Положение изображения можно задать с помощью CSS». плавать ' и ' позиция объекта ' характеристики. “ плавать ” принимает ключевое слово в качестве значения и перемещает элемент влево или вправо. С другой стороны, « позиция объекта ', принимает как ключевые слова, так и числовые значения в горизонтальном и вертикальном направлениях. В этой статье продемонстрирована процедура установки положения изображения в CSS.