.fill {object-fit: fill;} .contain {object-fit: contain;} .cover {object-fit: cover;} .scale-down {object-fit: scale-down;} .none {object-fit: none;} Try it Yourself » Exercise? What is the purpose of the CSS object-fit property? To add a shadow effect to an element. To...
DOCTYPEhtml><html><head><title>Title of the document</title><style>img.tree{width:200px;height:400px;object-fit: scale-down; }</style></head><body><h2>Object-fit property example</h2><h3>Original image:</h3><imgsrc="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e9...
}#img1{width:300px;height:300px;border:7pxsolid red; }#obj{width:500px;height:500px;object-fit:fill;border:7pxsolid red; }#left{float:left;text-align:center;padding-left:200px; }#center{float:center;text-align:center; } </style> </head> <body> <h1>ExampleofObject-fitproperty</h1...
object-fit: fill | contain | cover | scale-down | none | initial | inherit; Property ValuesValueDescription fill Image or video fills the container completely, possibly distorting its aspect ratio. Default value. contain Image or video is scaled to fit within the container while maintaining its...
object-fit: fill; border: 7px solid red; } #left { float: left; text-align: center; padding-left: 200px; } #center { float: center; text-align: center; } </style> </head> <body> <h1>Example of Object-fit property</h1> ...
object-fit: fill | contain | cover | none | scale-down | initial | inherit; ValuesMainly five values of this property are defined as follows:fill: It is the default value. Using this value, the entire object fills in the container. The replaced content is sized to fill the content box...
object-fit: <value> Where<value>is one of the values below. Possible Values Here are the possible values for this property: fill Specifies that the replaced content is sized to fill the element's content box. contain Specifies that the replaced content is sized to maintain its aspect ratio ...
The object-fit property offers five main keyword values: cover, contain, none, scale-down, and fill. These determine how an image will be displayed within its container, either by covering the area, fitting within it, maintaining its natural dimensions, scaling down to fit, or filling the co...
You can try to run the following code to implement object-fit property with the cover value. <!DOCTYPE html><html><head><style>.myimg{width:250px;height:350px;object-fit:fill;}</style></head><body><h2>SWIFT</h2><imgclass="myimg"src="https://www.tutorialspoint.com/assets/videos/co...
CSS | object-fit Property: Here, we are going to learn about the object-fit Property with syntax, examples in CSS (Cascading Style Sheet).