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

TODO

1:1 source, larger background-size

TODO

cropped 1:1 source

TODO

upscaled 1:1 source

TODO

1:1 source -> upscaled 3:2 target

TODO

bg-position:cover, 3:2 target, cropped left & right

1:1 source

TODO

1:1 source, larger background-size

TODO

cropped 1:1 source

TODO

upscaled 1:1 source

TODO

1:1 source -> upscaled 3:2 target

TODO

source cropped from all sides

1:1 source -> 3:2 target, cropped all around, center

TODO

1:1 source -> 3:2 target, cropped all around, top left

TODO

1:1 source, larger background-size

TODO

1:1 source, larger background-size

TODO

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

TODO

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