What does object-fit property do?

This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Aneeqa Khan

Last time I wrote about the topic of responsive images and object-fit plays a vital role in displaying images.

Usually, during displaying user-uploaded images we face the issue of image replacement according to the UI.

For example, if you want to show a rectangle image in a square box, it will be shown as a stretched image in a browser.

To fix this kind of issue, object-fit CSS property is beneficial.

I have created a simple app to demonstrate object-fit property usage and benefits.

Thank you for reading!
Feel free to connect on Twitter

This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Aneeqa Khan

Print Share Comment Cite Upload Translate Updates

APA

Aneeqa Khan | Sciencx (2022-09-12T16:02:47+00:00) What does object-fit property do?. Retrieved from https://www.scien.cx/2022/09/12/what-does-object-fit-property-do/

MLA

" » What does object-fit property do?." Aneeqa Khan | Sciencx - Monday September 12, 2022, https://www.scien.cx/2022/09/12/what-does-object-fit-property-do/

HARVARD

Aneeqa Khan | Sciencx Monday September 12, 2022 » What does object-fit property do?., viewed ,<https://www.scien.cx/2022/09/12/what-does-object-fit-property-do/>

VANCOUVER

Aneeqa Khan | Sciencx - » What does object-fit property do?. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/09/12/what-does-object-fit-property-do/

CHICAGO

" » What does object-fit property do?." Aneeqa Khan | Sciencx - Accessed . https://www.scien.cx/2022/09/12/what-does-object-fit-property-do/

IEEE

" » What does object-fit property do?." Aneeqa Khan | Sciencx [Online]. Available: https://www.scien.cx/2022/09/12/what-does-object-fit-property-do/. [Accessed: ]

rf:citation

» What does object-fit property do? | Aneeqa Khan | Sciencx | https://www.scien.cx/2022/09/12/what-does-object-fit-property-do/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.