Tall pic scale down

Wide pic scale down

Square pic scale down

A. Without MyImgScale

1. Background cannot scale down:
2. Plain div, img same ratio (h:160, w:120)

3. Img different ratio (h:100, w:120) - distorted

1. Background cannot scale down:
2. Plain div, img same ratio (h:120, w:160)




3. Img different ratio (h:100, w:160) - distorted

1. Background cannot scale down:
2. Plain div, img same ratio (h:160, w:160)

3. Img different ratio (h:100, w:160) - distorted

B. Fill

1. No overflow, but incorrect parent padding

2. Padding solution -
   Add another wrapper div with the same height
   and width as the original one

3. Hidden parent works (same effect as test 1)

4. Tall to wide

5. Tall to wide without centering

1. Wide to tall, incorrect parent padding

2. Padding solution -
   Add another wrapper div with the same height
   and width as the original one

3. Hidden parent works (same effect as test 1)

4. Wide to wide

5. Wide to wide without centering

1. Square to tall, incorrect parent padding

2. Padding solution -
   Add another wrapper div with the same height
   and width as the original one

3. Hidden parent works (same effect as test 1)

4. Square to wide

5. square to wide without centering

C. Fit

1. Tall to tall

2. Tall to wide

3. Tall to square

1. Wide to tall

2. Wide to wide

3. Wide to square

1. Square to tall

2. Square to wide

3. Square to square