Има много методи за позициониране на изображението в CSS, като например използването на обект-позиция собственост, използвайки плавам свойство (за подравняване на елементите отляво или отдясно).
Чрез използване на свойството позиция на обекта
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
Свойството float на CSS е свойство за позициониране, използвано за изтласкване на елемент наляво или надясно, което позволява на други елементи да го обгръщат. Обикновено се използва с изображения и оформления.
Елементите се движат само хоризонтално. Така че е възможно само да плавате елементи наляво или надясно, не нагоре или надолу. Плаващ елемент може да бъде преместен възможно най-наляво или надясно. Просто това означава, че плаващ елемент може да се показва в крайния ляв или крайния десен ъгъл.
Нека вземем пример за използване на плавам Имот.
Пример
CSS float property #left { float: left; } #right { float: right; } Тествайте сега Изход
