Sideway
output.to from Sideway
Draft for Information Only

Content

Object Rendering
 Types of Object Rendering
  Object Reposition
  Object Manipulation
 Properties of Object Rendering
  Object Reposition
   object-position
  Object Manipulation- Sizing Objects
   object-fit

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}
'object-position'

to specify the position rendering of the object itself with repective to the position of the rendered container.

value:<position> Initial:50% 50% Applies to:replaced elements Inherited:no Percentages:refer to width and height of element itself Media:visual Computed value:as for 'background-position' Canonical order:the horizontal component of the <position>, followed by the vertical component Animation type:as for 'background-position'
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}
'object-fit'

to specify the size rendering of the object itself with repective to the position of the rendered container.

value:fill | contain | cover | none | scale-down Initial: fill Applies to:replaced elements Inherited:no Percentages:n/a Media:visual Computed value:specified keyword Canonical order:per grammar Animation type:discrete
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.

©sideway

ID: 201100019 Last Updated: 19/11/2020 Revision: 0 Ref:

close

References

  1. http://www.w3.org/TR/1999/REC-html401-1999, 1999, HTML 4.01 Specification: W3C Recommendation, updated 24 December 1999
close
IMAGE

Home 5

Business

Management

HBR 3

Information

Recreation

Hobbies 8

Culture

Chinese 1097

English 337

Reference 67

Computer

Hardware 151

Software

Application 202

Digitization 25

Latex 10

Manim 159

Numeric 19

Programming

Web 285

Unicode 495

HTML 65

CSS 59

ASP.NET 194

OS 391

DeskTop 7

Python 46

Knowledge

Mathematics

Formulas 8

Algebra 29

Number Theory 206

Trigonometry 18

Geometry 18

Calculus 67

Complex Analysis 21

Engineering

Tables 8

Mechanical

Mechanics 1

Rigid Bodies

Statics 92

Dynamics 37

Fluid 5

Fluid Kinematics 5

Control

Process Control 1

Acoustics 19

FiniteElement 2

Natural Sciences

Electric 27

Biology 1

Geography 1


Copyright © 2000-2021 Sideway . All rights reserved Disclaimers last modified on 06 September 2019