WeCode
Academy
Tutorials
Web Development
Bootstrap
CSS
HTML
JavaScript
jQuery
Node.js
PHP
React
TypeScript
Programming
C
C#
C++
Go
Java
Python
Rust
Data and Databases
NumPy
Pandas
SQL
Tools
Bash
Git
Projects
Project: A Tiny Shell in C
Project: Bank Account System
Project: Library Management System
Project: Portfolio Page
Project: Quiz App in React
Project: Sales Data Analysis
Project: Server Log Analyser
Project: To-Do REST API
Project: URL Shortener
Project: Word Counter in Four Languages
All tutorials ❯
Paths
References
Practice
Try it editor
Quizzes
How To recipes
Tools
Glossary
My Learning
🌙
Dark mode
Home
›
References
›
CSS Properties
❮ border-collapse
aspect-ratio ❯
object-fit
How an image fills its box.
Group: Images
Syntax
object-fit: cover | contain;
Example
Example
html
<img alt="" style="width:100px;height:50px;object-fit:cover;background:#eee" src="data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2740%27 height=%2740%27%3E%3Ccircle cx=%2720%27 cy=%2720%27 r=%2718%27 fill=%27teal%27/%3E%3C/svg%3E">
Run ❯
Reset
Open in editor »
← All of CSS Properties