Свойство CSS object-position


Оглавление

    Показать оглавление


Свойство CSS object-position используется для указания того, как должен располагаться <img> или <video> внутри своего контейнера.


Изображение

Посмотрите на следующее изображение из Парижа размером 400x300 пикселей:

Paris

Далее мы используем свойство CSS

object-fit: cover;

чтобы сохранить соотношение сторон и заполнить заданное измерение. Однако изображение будет обрезано по размеру, вот так:

Paris

Пример

img {
  width: 200px;
  height: 
  300px;
  object-fit: cover;
}

Попробуйте сами →

<!DOCTYPE html>
<html>
<head>
<style>
img {
  width: 200px;
  height: 300px;
  object-fit: cover;
}
</style>
</head>
<body>

<h2>Using object-fit: cover</h2>

<img src="paris.jpg" alt="Paris" width="400" height="300">

</body>
</html>




Использование свойства object-position

Допустим, часть изображения, которая отображается, расположена не так, как мы хотим. Чтобы позиционировать изображение, мы будем использовать свойство object-position.

Здесь мы будем использовать свойство object-position, чтобы расположить изображение так, чтобы великое старое здание находилось в центре:

Paris

Пример

img {
  width: 200px;
  height: 
  300px;
  object-fit: cover;
  object-position: 80% 100%;
}

Попробуйте сами →

<!DOCTYPE html>
<html>
<head>
<style>
img {
  width: 200px;
  height: 300px;
  object-fit: cover;
  object-position: 80% 100%;
}
</style>
</head>
<body>

<h2>Using object-position</h2>

<p>Here we will use the object-position property to position the image so that the great old building is in center:</p>

<img src="paris.jpg" alt="Paris" width="400" height="300">

</body>
</html>


Здесь мы будем использовать свойство object-position, чтобы расположить изображение так, чтобы знаменитая Эйфелева башня находилась в центре:

Paris

Пример

img {
  width: 200px;
  height: 
  300px;
  object-fit: cover;
  object-position: 15% 100%;
}

Попробуйте сами →

<!DOCTYPE html>
<html>
<head>
<style>
img {
  width: 200px;
  height: 300px;
  object-fit: cover;
  object-position: 15% 100%;
}
</style>
</head>
<body>

<h2>Using object-position</h2>

<p>Here we will use the object-position property to position the image so that the famous Eiffel Tower is in center:</p>

<img src="paris.jpg" alt="Paris" width="400" height="300">

</body>
</html>



CSS Object-* Свойства

В следующей таблице перечислены свойства CSS object-*:

object-fit

Указывает, как следует изменить размер <img> или <video> в соответствии с его контейнером.

object-position

Указывает, как должен располагаться <img> или <video> с помощью x/y. координаты внутри «собственного поля содержимого»