Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
object-position Property in CSS
The object-position property is used to specify whether how we should position image or video inside its own box. It is always used with the object-fit property. Let us how to implement the object-position property.
Syntax
The following is the syntax of the object-position property −
object-position: value;
The value above can be the position of the image or video inside its own content box.
Representation
The 1st value of the object-position property controls the x-axis position and the second controls the y-axis. The position values can be −
Left
Right
Center
px
%
Object position with number values
In this example, we have set the object position to 10px and 20%. The image is positioned 10px from the left and 20% from the top −
object-position: 10px 20%;
Example
Let us see the example −
<!DOCTYPE html>
<html>
<head>
<style>
img.demo {
width: 200px;
height: 200px;
object-fit: none;
object-position: 10px 20%;
border: 2px dashed yellow;
}
</style>
</head>
<body>
<h2>Demo Heading</h2>
<img class="demo" src="https://www.tutorialspoint.com/memcached/images/memcached-mini-logo.jpg" alt="Memcached" width="400" height="250">
<h2>Memcached Tutorial</h2>
<img src="https://www.tutorialspoint.com/memcached/images/memcached-mini-logo.jpg" alt="Memcached" width="300" height="250">
</body>
</html>
Object position with string value
In this example, we have set the object position to right 10%. The image is positioned right from the left and 10px from the top −
object-position: right 10px;
Example
Let us see the example −
<!DOCTYPE html>
<html>
<head>
<style>
img.demo {
width: 200px;
height: 200px;
object-fit: none;
object-position: right 10px;
border: 2px dashed yellow;
}
</style>
</head>
<body>
<h2>Demo Heading</h2>
<img class="demo" src="https://www.tutorialspoint.com/assets/profiles/123055/profile/200_187394-1565938756.jpg" alt="Amit" width="400" height="250">
<h2>Profile Image</h2>
<img src="https://www.tutorialspoint.com/assets/profiles/123055/profile/200_187394-1565938756.jpg" alt="Amit" width="250" height="250">
</body>
</html>
122 Views
