- Trending Categories
- 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
Crop Images in CSS with object-fit and object-position
CSS object-fit and object-position property helps us crop images and specify how it is displayed in an element.
The syntax of CSS object-fit property is as follows −
Selector { object-fit: /*value*/ object-position:/*value*/ }
Example
The following examples illustrate CSS object-fit property.
<!DOCTYPE html> <html> <head> <style> img { object-fit: cover; } img:last-of-type { object-fit: contain; } </style> </head> <body> cover <img src="https://images.unsplash.com/photo-1611423837981- 2cba00ee7631?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=120&ixlib=rb1.2.1&q=80&w=120" width="200" height="250"/> <img src="https://images.unsplash.com/photo-1611423837981- 2cba00ee7631?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=120&ixlib=rb1.2.1&q=80&w=120" width="200" height="250"/> contain </body> </html>
Output
This will produce the following result −
Example
<!DOCTYPE html> <html> <style> div { border: 1px solid blue; width:100%; height:300px; } img { float:left; width:50%; height:100%; object-fit:cover; object-position: 20px -10px; } </style> <body> <div > <img src="https://images.unsplash.com/photo-1611800065908- 233b597db552?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=350&ixlib=rb1.2.1&q=80&w=250" /> <img src="https://images.unsplash.com/photo-1612626256634- 991e6e977fc1?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=350&ixlib=rb1.2.1&q=80&w=250"/> </div> </body> </html>
Output
This will produce the following result −
Effect of resizing
Advertisements