Object Rendering

Object rendering is another property in visual style rendering. The properties of solid object can be divided into two catalogues. They are object reposition and object manipulation.

Types of Object Rendering

Object Reposition

This is the reposition of the object itself with repective to the rendered container.

Object Manipulation

This is the addition manipulation of the object itself with repective to the rendered container.

Properties of Object Rendering

Object Reposition

object-position

object-position is used to reposition the position rendering of the object itself with repective to the position of the rendered container. e.g.

{object-position: top left}

The object-position property determines the alignment of the replaced element inside its box. The <position> value type (which is also used for background-position) is defined in [CSS-VALUES-3], and is resolved using the concrete object size as the object area and the content box as the positioning area. Note: Areas of the box not covered by the replaced element will show the element’s background.

Object Manipulation- Sizing Objects

object-fit

object-fit is used to re-render the size rendering of the object itself with repective to the position of the rendered container. e.g.

{object-fit: none}

The object-fit property specifies how the contents of a replaced element should be fitted to the box established by its used height and width. If the content does not completely fill the replaced element’s content box, the unfilled space shows the replaced element’s background. Since replaced elements always clip their contents to the content box, the content will never overflow. See the object-position property for positioning the object with respect to the content box. Note: The object-fit property has similar semantics to the fit attribute in [SMIL10] and the <meetOrSlice> parameter on the preserveAspectRatio attribute in [SVG11]. Note: Per the object size negotiation algorithm, the concrete object size (or, in this case, the size of the content) does not directly scale the object itself - it is merely passed to the object as information about the size of the visible canvas. How to then draw into that size is up to the image format. In particular, raster images always scale to the given size, while SVG uses the given size as the size of the "SVG Viewport" (a term defined by SVG) and then uses the values of several attributes on the root <svg> element to determine how to draw itself.