Існує багато методів розміщення зображення в CSS, наприклад використання об'єкт-позиція власності, використовуючи в плавати властивість (для вирівнювання елементів ліворуч або праворуч).

За допомогою властивості object-position

The об'єкт-позиція властивість у CSS визначає вирівнювання вмісту всередині контейнера. Він використовується з об'єкт-підгонка властивість, щоб визначити, як елемент, як або позиціонується з координатами x/y у полі вмісту.

При використанні об'єкт-підгонка властивість, значення за умовчанням для об'єкт-позиція є 50% 50% , тому за замовчуванням усі зображення розташовано в центрі поля вмісту. Ми можемо змінити стандартне вирівнювання за допомогою об'єкт-позиція власність.

Синтаксис

 object-position: | initial | inherit; 

The положення значення об'єкт-позиція властивість визначає положення відео або зображення всередині контейнера. Він приймає два числові значення, де перше значення контролює вісь x, а друге значення керує віссю y. Ми можемо використовувати рядок, наприклад ліво право , або центр тощо для розміщення зображення в контейнері. Він допускає негативні значення.

Ми можемо зрозуміти це більш чітко, використовуючи деякі приклади.

приклад

У цьому прикладі ми використовуємо такі рядкові значення, як «справа вгорі», «вгорі по центру», і 'ліворуч зверху' щоб розмістити зображення.

 CSS object-position property #center { width: 400px; height: 150px; border: 5px solid red; background-color: lightgreen; object-fit: none; object-position: center top; } #left { width: 400px; height: 150px; border: 5px solid red; background-color: lightgreen; object-fit: none; object-position: left top; } #right { width: 400px; height: 150px; border: 5px solid red; background-color: lightgreen; object-fit: none; object-position: right top; } <h3>object-position: center top;</h3> <h3>object-position: left top;</h3> <h3>object-position: right top;</h3> 

Вихід

Тепер є ще один приклад використання об'єкт-позиція власність.

приклад

У цьому прикладі ми використовуємо початковий значення, яке розмістило зображення по центру. Це тому, що початкове значення встановлює для властивості значення за замовчуванням 50% 50% . Ми також використовуємо числові значення 200 пікселів і 100 пікселів .

 CSS object-position property #num { width: 400px; height: 250px; border: 5px solid red; background-color: lightgreen; object-fit: none; object-position: 200px 100px; } #init { width: 400px; height: 250px; border: 5px solid red; background-color: lightgreen; object-fit: none; object-position: initial; } <h3>object-position: 200px 100px;</h3> <h3>object-position: initial;</h3> 

Вихід

За допомогою властивості float

Властивість CSS float — це властивість позиціонування, яка використовується для просування елемента вліво або вправо, дозволяючи іншим елементам обертатися навколо нього. Зазвичай він використовується із зображеннями та макетами.

Елементи плавають лише горизонтально. Таким чином, можна лише переміщати елементи вліво або вправо, а не вгору або вниз. Плаваючий елемент можна перемістити якомога далі вліво або вправо. Простіше кажучи, це означає, що плаваючий елемент може відображатися в крайньому лівому або крайньому правому куті.

Розглянемо приклад використання плавати власність.

приклад

 CSS float property #left { float: left; } #right { float: right; } 

Вихід