1:1 background-position: top left -> 3:2 cropped into 1:1 container background-position: top left
3:2 cropped into 1:1 container background-position: top left -> 3:2 cropped into 1:1 container, background-position: top left
1:1 background-position: top left -> 3:2 cropped into 1:1 container background-position: center
3:2 cropped into 1:1 container background-position: top left -> 3:2 cropped into 1:1 container, background-position: center
translate 1:1 source -> 3:2 target cropped into 1:1 container, background-position: center
!!! This should not use RECREATE but RECROP!!!
translate 3:2 source cropped into 1:1 container -> 3:2 target cropped into 1:1 container, background-position: center
crop up 1:1 source -> 3:2 target, background-position: left
crop up 1:1 source -> 3:2 target, background-position: center
symetric
<img> to <img>
fill (default)
cover to cover
contain to contain
bg to bg
fill (100% 100%)
cover to cover
contain to contain
<img> to bg
fill (100% 100%)
cover to cover
contain to contain
bg to <img>
fill (default)
cover to cover
contain to contain
asymetric target
<img> to <img>
fill (default)
cover to cover
contain to contain
bg to bg
fill (100% 100%)
cover to cover
contain to contain
<img> to bg
fill
cover to cover
contain to contain
bg to <img>
fill
cover to cover
contain to contain
asymetric source
<img> to <img>
fill (default)
cover to cover
contain to contain
bg to bg
fill (100% 100%)
cover to cover
contain to contain
<img> to bg
fill (100% 100%)
cover to cover
contain to contain
bg to <img>
fill (default)
cover to cover
contain to contain
center cropped 1:1 miniature
cropped miniature vs same file as miniature
1:1 source -> 3:2 target that fills container
1:1 source -> upscaled 3:2 target
1:1 source -> downscaled 3:2 target
1:1 source -> 1:1 crop of 3:2 target with bg-position:cover
On the LEFT side the source is 1:1 miniature. The file is actually 1:1 200x200px.
On the RIGHT side the source is the same 3:2 file as the target.
1:1 source -> 3:2 target
upscaled 1:1 source -> 3:2 target
1:1 source -> upscaled 3:2 target
bg-position:cover, 3:2 target, cropped top & bottom
1:1 source
1:1 source, larger background-size
cropped 1:1 source
upscaled 1:1 source
1:1 source -> upscaled 3:2 target
bg-position:cover, 3:2 target, cropped left & right
1:1 source
1:1 source, larger background-size
cropped 1:1 source
upscaled 1:1 source
1:1 source -> upscaled 3:2 target
source cropped from all sides
1:1 source -> 3:2 target, cropped all around, center
1:1 source -> 3:2 target, cropped all around, top left
1:1 source, larger background-size
1:1 source, larger background-size
insetted source in larger container
wider source container, background-position: left; no clip
not possible with not-cropped source
background-position: left; + clipped source
not possible with not-cropped source
background-position: left; + clipped target
not possible with not-cropped source
recreate strategy -> clipped target
clipped target
background-position: left; cropped by container offset, no clip-path
background-position: left; clipped from right with clip-path
background-position: center; cropped by container offset, no clip-path
background-position: center; clipped from right with clip-path
background-position: center; clipped from right with clip-path
bg-size:contain, inset | clip-path (on the right side)
CRITICAL! These examples are critical. If they work, everything works.
insetted contain target
insetted contain / clipped source, background-position: center;
insetted contain / clipped source, background-position: left;
Wild experiments
1:1 -> squished 3:2 with inset from right
1:1 -> squished 3:2 with inset from right + clip-path
background-size: 180px 120px;
background-size: 240px 110px;
todo
bg-position & clip
background-position
clip-path
background-position & clip-path combined on one side
background-position & clip-path combined on both sides
background-position pushed outside & clip cuts out even more
Known unsupported edge cases
repositioning within container with background-size
background with squished aspect ratio
