Offsets
landscape, cropped, left
left
containerWidth: 100
contentWidth: 200
offsetLeft: 0
offsetRight: -100
contentOffsetLeftRatio: 0
contentOffsetRightRatio: -0.5
containerOffsetLeftRatio: 0
containerOffsetRightRatio: -1
0%
containerWidth: 100
contentWidth: 200
offsetLeft: 0
offsetRight: -100
contentOffsetLeftRatio: 0
contentOffsetRightRatio: -0.5
containerOffsetLeftRatio: 0
containerOffsetRightRatio: -1
0px
containerWidth: 100
contentWidth: 200
offsetLeft: 0
offsetRight: -100
contentOffsetLeftRatio: 0
contentOffsetRightRatio: -0.5
containerOffsetLeftRatio: 0
containerOffsetRightRatio: -1
landscape, cropped, center
center
containerWidth: 100
contentWidth: 200
offsetLeft: -50
offsetRight: -50
contentOffsetLeftRatio: -0.25
contentOffsetRightRatio: -0.25
containerOffsetLeftRatio: -0.5
containerOffsetRightRatio: -0.5
50%
containerWidth: 100
contentWidth: 200
offsetLeft: -50
offsetRight: -50
contentOffsetLeftRatio: -0.25
contentOffsetRightRatio: -0.25
containerOffsetLeftRatio: -0.5
containerOffsetRightRatio: -0.5
-50px
containerWidth: 100
contentWidth: 200
offsetLeft: -50
offsetRight: -50
contentOffsetLeftRatio: -0.25
contentOffsetRightRatio: -0.25
containerOffsetLeftRatio: -0.5
containerOffsetRightRatio: -0.5
landscape, cropped, right
right
containerWidth: 100
contentWidth: 200
offsetLeft: -100
offsetRight: 0
contentOffsetLeftRatio: -0.5
contentOffsetRightRatio: 0
containerOffsetLeftRatio: -1
containerOffsetRightRatio: 0
100%
containerWidth: 100
contentWidth: 200
offsetLeft: -100
offsetRight: 0
contentOffsetLeftRatio: -0.5
contentOffsetRightRatio: 0
containerOffsetLeftRatio: -1
containerOffsetRightRatio: 0
-100px
containerWidth: 100
contentWidth: 200
offsetLeft: -100
offsetRight: 0
contentOffsetLeftRatio: -0.5
contentOffsetRightRatio: 0
containerOffsetLeftRatio: -1
containerOffsetRightRatio: 0
portrait
img, contain, portrait, centered position
containerWidth: 100
naturalWidth: 50
contentWidth: 50
offsetRight: 25
offsetLeft: 25
contentOffsetRightRatio: 0.5
contentOffsetLeftRatio: 0.5
containerOffsetRightRatio: 0.25
containerOffsetLeftRatio: 0.25
larger square
img, contain, portrait, centered position
containerWidth: 100
naturalWidth: 200
contentWidth: 200
offsetTop: -50
offsetRight: -50
offsetBottom: -50
offsetLeft: -50
contentOffsetRightRatio: -0.25
contentOffsetLeftRatio: -0.25
containerOffsetRightRatio: -0.5
containerOffsetLeftRatio: -0.5
smaller square, 50x50 inside 100x100 container
left-top
offsetTop: 0
offsetRight: 50
offsetBottom: 50
offsetLeft: 0
contentOffsetTopRatio: 0
contentOffsetRightRatio: 1
contentOffsetBottomRatio: 1
contentOffsetLeftRatio: 0
containerOffsetTopRatio: 0
containerOffsetRightRatio: 0.5
containerOffsetBottomRatio: 0.5
containerOffsetLeftRatio: 0
-----------------
insetTop: 0
insetRight: 50
insetBottom: 50
insetLeft: 0
insetTopRatio: 0
insetRightRatio: 0.50
insetBottomRatio: 0.50
insetLeftRatio: 0
right-bottom
offsetTop: 50
offsetRight: 0
offsetBottom: 0
offsetLeft: 50
contentOffsetTopRatio: 1
contentOffsetRightRatio: 0
contentOffsetBottomRatio: 0
contentOffsetLeftRatio: 1
containerOffsetTopRatio: 0.5
containerOffsetRightRatio: 0
containerOffsetBottomRatio: 0
containerOffsetLeftRatio: 0.5
-------------------
insetTop: 50
insetRight: 0
insetBottom: 0
insetLeft: 50
insetTopRatio: 0.50
insetRightRatio: 0
insetBottomRatio: 0
insetLeftRatio: 0.50
center
offsetTop: 25
offsetRight: 25
offsetBottom: 25
offsetLeft: 25
contentOffsetTopRatio: 0.5
contentOffsetRightRatio: 0.5
contentOffsetBottomRatio: 0.5
contentOffsetLeftRatio: 0.5
containerOffsetTopRatio: 0.25
containerOffsetRightRatio: 0.25
containerOffsetBottomRatio: 0.25
containerOffsetLeftRatio: 0.25
------------
insetTop: 25
insetRight: 25
insetBottom: 25
insetLeft: 25
insetTopRatio: 0.25
insetRightRatio: 0.25
insetBottomRatio: 0.25
insetLeftRatio: 0.25
Ratios
wider than container
containerWidth: 100
offsetLeft: 0
offsetRight: -100
contentWidth: 200
voidWidth: 0
voidWidthRatio: 0
fillWidthRatio: 1
thinner than container
containerWidth: 100
naturalWidth: 50
offsetRight: 25
offsetLeft: 25
contentWidth: 50
voidWidth: 50
voidWidthRatio: 0.5
fillWidthRatio: 0.5
Visible positions
exact same square
visibleEdgeTop: 0
visibleEdgeRight: 1
visibleEdgeBottom: 1
visibleEdgeLeft: 0
contained: true
landscape
visibleEdgeTop: 0
visibleEdgeRight: 0.75
visibleEdgeBottom: 1
visibleEdgeLeft: 0.25
contained: false
larger square
visibleEdgeTop: 0.25
visibleEdgeRight: 0.75
visibleEdgeBottom: 0.75
visibleEdgeLeft: 0.25
contained: false
thinner than container
visibleEdgeTop: 0
visibleEdgeRight: 1
visibleEdgeBottom: 1
visibleEdgeLeft: 0
contained: true
smaller square
smaller square fills container
visibleEdgeTop: 0
visibleEdgeRight: 1
visibleEdgeBottom: 1
visibleEdgeLeft: 0
contained: true
smaller square left-top
visibleEdgeTop: 0
visibleEdgeRight: 1
visibleEdgeBottom: 1
visibleEdgeLeft: 0
contained: true
smaller square right-bottom
visibleEdgeTop: 0
visibleEdgeRight: 1
visibleEdgeBottom: 1
visibleEdgeLeft: 0
contained: true
background-size / object-fit
basic division into groups
div, default background-size
cover: false
contain: false
natural: true
fill: false
hardCodedSize: false
contained: true
div, background-size: 50% 50%
cover: false
contain: false
natural: false
fill: false
hardCodedSize: true
contained: true
div, background-size: 50px 50px
cover: false
contain: false
natural: false
fill: false
hardCodedSize: true
contained: true
img, default object-fit
cover: false
contain: false
natural: false
fill: true
hardCodedSize: false
contained: true
div, background-size: 100% 100% (emulates default 'fill' behavior of img)
cover: false
contain: false
natural: false
fill: true
hardCodedSize: false
contained: true
img, object-fit: cover
cover: true
contain: false
natural: false
fill: false
hardCodedSize: false
contained: true
div, background-size: cover
cover: true
contain: false
natural: false
fill: false
hardCodedSize: false
contained: true
img, object-fit: contain
cover: false
contain: true
natural: false
fill: false
hardCodedSize: false
contained: true
div, background-size: contain
cover: false
contain: true
natural: false
fill: false
hardCodedSize: false
contained: true
img, default object-fit
cover: false
contain: false
natural: false
fill: true
hardCodedSize: false
contained: true
div, background-size: 100% 100% (emulates default 'fill' behavior of img)
cover: false
contain: false
natural: false
fill: true
hardCodedSize: false
contained: true
percentual sizes
div, background-size: 25%
containerWidth: 100
containerHeight: 100
naturalWidth: 50
naturalHeight: 100
contentWidth: 25
contentHeight: 50
div, background-size: 50% 50%
containerWidth: 100
containerHeight: 100
naturalWidth: 50
naturalHeight: 100
contentWidth: 50
contentHeight: 50
Uncategorized
div, square of exact same size as container
containerWidth: 100
containerHeight: 100
naturalWidth: 100
naturalHeight: 100
contentWidth: 100
contentHeight: 100
offsetTop: 0
offsetRight: 0
offsetBottom: 0
offsetLeft: 0
contained: true
cropped: false
inset: false
outset: false
div, cover, larger than container, downscaled
contained: true
containerWidth: 100
containerHeight: 100
naturalWidth: 200
naturalHeight: 200
contentWidth: 100
contentHeight: 100
offsetTop: 0
offsetRight: 0
offsetBottom: 0
offsetLeft: 0
div, cover, smaller than container, upscaled
containerWidth: 120
containerHeight: 120
naturalWidth: 100
naturalHeight: 100
contentWidth: 120
contentHeight: 120
offsetTop: 0
offsetRight: 0
offsetBottom: 0
offsetLeft: 0
contained: true
cropped: false
outset: false
inset: false
div, contain, smaller than container, upscaled
containerWidth: 120
containerHeight: 120
naturalWidth: 100
naturalHeight: 100
contentWidth: 120
contentHeight: 120
offsetTop: 0
offsetRight: 0
offsetBottom: 0
offsetLeft: 0
contained: true
cropped: false
outset: false
inset: false
div, default sizing, smaller than container, no offset (only implicit right+bottom))
containerWidth: 120
containerHeight: 120
naturalWidth: 100
naturalHeight: 100
contentWidth: 100
contentHeight: 100
offsetTop: 0
offsetRight: 20
offsetBottom: 20
offsetLeft: 0
contained: true
cropped: false
outset: false
inset: true
div, default sizing, smaller than container, 10px offset (all around)
containerWidth: 120
containerHeight: 120
naturalWidth: 100
naturalHeight: 100
contentWidth: 100
contentHeight: 100
offsetTop: 10
offsetRight: 10
offsetBottom: 10
offsetLeft: 10
contained: true
cropped: false
outset: false
inset: true
div, default sizing, smaller than container, 20px offset
containerWidth: 120
containerHeight: 120
naturalWidth: 100
naturalHeight: 100
contentWidth: 100
contentHeight: 100
offsetTop: 20
offsetRight: 0
offsetBottom: 0
offsetLeft: 20
contained: true
cropped: false
outset: false
inset: true
div, default sizing, smaller than container, 30px offset, cropped
containerWidth: 120
containerHeight: 120
naturalWidth: 100
naturalHeight: 100
contentWidth: 100
contentHeight: 100
offsetTop: 30
offsetRight: -10
offsetBottom: -10
offsetLeft: 30
contained: false
cropped: true
outset: true
inset: true
div, default sizing, smaller than container, offset and clip all around
containerWidth: 120
containerHeight: 120
naturalWidth: 100
naturalHeight: 100
contentWidth: 100
contentHeight: 100
offsetTop: 10
offsetRight: 10
offsetBottom: 10
offsetLeft: 10
clipTop: 20
clipRight: 20
clipBottom: 20
clipLeft: 20
contained: true
cropped: true
outset: false
inset: true
div, default sizing, smaller than container, left+top clip (with implicit bottom+right offset due to smaller image size)
containerWidth: 120
containerHeight: 120
naturalWidth: 100
naturalHeight: 100
contentWidth: 100
contentHeight: 100
offsetTop: 0
offsetRight: 20
offsetBottom: 20
offsetLeft: 0
clipTop: 20
clipRight: 0
clipBottom: 0
clipLeft: 20
contained: true
cropped: true
outset: false
inset: true
div, default sizing, smaller than container, left+top offset and bottom+right clip
containerWidth: 120
containerHeight: 120
naturalWidth: 100
naturalHeight: 100
contentWidth: 100
contentHeight: 100
offsetTop: 20
offsetRight: 0
offsetBottom: 0
offsetLeft: 20
clipTop: 0
clipRight: 20
clipBottom: 20
clipLeft: 0
contained: true
cropped: true
outset: false
inset: true
div, default sizing, portrait smaller than container, implicit right+bottom offset
containerWidth: 120
containerHeight: 120
naturalWidth: 50
naturalHeight: 100
contentWidth: 50
contentHeight: 100
offsetTop: 0
offsetRight: 70
offsetBottom: 20
offsetLeft: 0
contained: true
cropped: false
outset: false
inset: true
div, default sizing, landscape larger than container, implicit right+bottom offset
contained: false
containerWidth: 100
containerHeight: 100
naturalWidth: 200
naturalHeight: 120
contentWidth: 200
contentHeight: 120
offsetTop: 0
offsetRight: -100
offsetBottom: -20
offsetLeft: 0
contained: false
cropped: true
outset: true
inset: false
div, contain, landscape, default position (top left)
contained: true
containerWidth: 100
containerHeight: 100
naturalWidth: 200
naturalHeight: 120
contentWidth: 100
contentHeight: 60
offsetTop: 0
offsetRight: 0
offsetBottom: 40
offsetLeft: 0
div, contain, landscape, centered position
contained: true
containerWidth: 100
containerHeight: 100
naturalWidth: 200
naturalHeight: 120
contentWidth: 100
contentHeight: 60
offsetTop: 20
offsetRight: 0
offsetBottom: 20
offsetLeft: 0
img, contain, landscape, default position (cetered)
contained: true
containerWidth: 100
containerHeight: 100
naturalWidth: 200
naturalHeight: 120
contentWidth: 100
contentHeight: 60
offsetTop: 20
offsetRight: 0
offsetBottom: 20
offsetLeft: 0
div, contain, portrait, centered position
containerWidth: 100
containerHeight: 100
naturalWidth: 50
naturalHeight: 100
contentWidth: 50
contentHeight: 100
offsetTop: 0
offsetRight: 25
offsetBottom: 0
offsetLeft: 25
img, contain, portrait, centered position
containerWidth: 100
containerHeight: 100
naturalWidth: 50
naturalHeight: 100
contentWidth: 50
contentHeight: 100
offsetTop: 0
offsetRight: 25
offsetBottom: 0
offsetLeft: 25
contained: true
cropped: false
outset: false
inset: true
img, contain, portrait, centered position, clipped (same as offset, not cropped)
containerWidth: 100
containerHeight: 100
naturalWidth: 50
naturalHeight: 100
contentWidth: 50
contentHeight: 100
offsetTop: 0
offsetRight: 25
offsetBottom: 0
offsetLeft: 25
clipTop: 0
clipRight: 25
clipBottom: 0
clipLeft: 25
cropTop: 0
cropRight: 25
cropBottom: 0
cropLeft: 25
contained: true
cropped: false
outset: false
inset: true
img, contain, portrait, centered position, clipped more (cropped)
containerWidth: 100
containerHeight: 100
naturalWidth: 50
naturalHeight: 100
contentWidth: 50
contentHeight: 100
offsetTop: 0
offsetRight: 25
offsetBottom: 0
offsetLeft: 25
contentOffsetTopRatio: 0
contentOffsetRightRatio: 0.25
contentOffsetBottomRatio: 0
contentOffsetLeftRatio: 0.25
clipTop: 0
clipRight: 37.5
clipBottom: 0
clipLeft: 37.5
cropTop: 0
cropRight: 37.5
cropBottom: 0
cropLeft: 37.5
contentWidth: 50
contentHeight: 100
contentWidthRatio: 0.25
contentHeightRatio: 1
contained: true
cropped: true
outset: false
inset: true
div, cover, landscape, overflowing, default position (top left)
containerWidth: 100
containerHeight: 100
naturalWidth: 400
naturalHeight: 200
contentWidth: 200
contentHeight: 100
offsetTop: 0
offsetRight: -100
offsetBottom: 0
offsetLeft: 0
contained: false
cropped: true
outset: true
inset: false
div, cover, landscape, overflowing, centered
containerWidth: 100
containerHeight: 100
naturalWidth: 400
naturalHeight: 200
contentWidth: 200
contentHeight: 100
offsetTop: 0
offsetRight: -50
offsetBottom: 0
offsetLeft: -50
contained: false
cropped: true
outset: true
inset: false
img, cover, landscape, overflowing, default position (centered)
containerWidth: 100
containerHeight: 100
naturalWidth: 400
naturalHeight: 200
contentWidth: 200
contentHeight: 100
offsetTop: 0
offsetRight: -50
offsetBottom: 0
offsetLeft: -50
contained: false
cropped: true
outset: true
inset: false
div, cover, portrait, overflowing, centered
containerWidth: 100
containerHeight: 100
naturalWidth: 50
naturalHeight: 100
contentWidth: 100
contentHeight: 200
offsetTop: -50
offsetRight: 0
offsetBottom: -50
offsetLeft: 0
contained: false
cropped: true
outset: true
inset: false
img center
naturalWidth: 100
contentWidth: 100
offsetLeft: 0
offsetRight: 0
offsetLeftPercent: 0
offsetRightPercent: 0
center
naturalWidth: 100
contentWidth: 100
offsetLeft: 0
offsetRight: 0
offsetLeftPercent: 0
offsetRightPercent: 0
left top
naturalWidth: 100
contentWidth: 100
offsetLeft: 0
offsetRight: 0
offsetLeftPercent: 0
offsetRightPercent: 0
center
containerWidth: 100
contentWidth: 200
offsetLeft: -50
offsetRight: -50
offsetLeftPercent: -0.25
offsetRightPercent: -0.25
