Обект-позиция - CSS-трикове

В object-positionимота се използва във връзка с object-fitимот и определя как елемент, като например видео или изображение е разположен с X / Y координати вътре съдържанието му кутия. Това свойство приема две числови стойности, като 0 10%или 0 10px. В тези примери първото число показва, че изображението трябва да бъде поставено вляво от полето за съдържание (0), второто, че трябва да е разположено на 10% или 10px отгоре. Също така е възможно да се използват отрицателни стойности.

Стойността по подразбиране за object-positionе 50% 50%при използване на object-fitсвойството върху изображение, така че по подразбиране всички изображения са разположени в центъра на полето за тяхното съдържание, по следния начин:

img ( object-fit: none; object-position: 50% 50%; /* default value: image is centered*/ object-position: 0 0; /* positioned top left of the content box */ )

Демонстрация

По-долу има няколко примера за това как можем да манипулираме object-positionизображението със object-fitсвойството, зададено на none. Ако съдържанието на изображението не запълва полето за съдържание по каквато и да е причина, тогава незапълненото пространство ще покаже фона на елемента, който може да бъде цветен или дори a background-image, както в последния пример:

Вижте позицията на обекта на писалката от Робин Rendle (@robinrendle) на CodePen.