Enhance documentation for 'object-fit' CSS property

[youssef-el-atmani]

Include a note on the importance of setting width and height for effective object-fit application.

Description

I added a note about how to use the object-fit property effectively

Motivation

• Because I lost a lot of time trying to understand why the object-fit property doesn't work on my personal examples, I did what the docs instruct, but that property fails to apply. And just later I discovered that I should set a height and width to the image in order for that object-fit to be applied effectively. I think that works the same for all the replaced-elements, but I only tested it for img elements.
• Readers will be able to use that object-fit effectively.

Additional details

There is no clue or note about that even in the object-fit mdn-reference

Related issues and pull requests

[github-actions]

Preview URLs

• /en-US/docs/Learn_web_development/Core/Styling_basics/Images_media_forms

Flaws (5)

URL: /en-US/docs/Learn_web_development/Core/Styling_basics/Images_media_forms
Title: Images, media, and form elements
Flaw count: 5

• macros:
  • Macro produces link /en-US/docs/Web/CSS/max-width which is a redirect
  • Macro produces link /en-US/docs/Web/CSS/object-fit which is a redirect
  • Macro produces link /en-US/docs/Web/CSS/object-fit which is a redirect
  • Macro produces link /en-US/docs/Web/CSS/object-fit which is a redirect
  • Can't resolve /en-US/curriculum/

(comment last updated: 2025-11-19 12:20:24)