Об'єкт-положення - CSS-хитрощі

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

Значення за замовчуванням 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. Якщо вміст зображення з будь-якої причини не заповнює поле вмісту, тоді незаповнене місце покаже фон елемента, який може бути кольором або навіть background-image, як у останньому прикладі:

Див. Позицію об’єкта ручки Робіна Рендла (@robinrendle) на CodePen.