Original
Original
Set width/height on image + CSS width
Set width/height on image + CSS height
Set height on image + CSS width
Set width on image + CSS height
No dimensions on image + CSS width
No dimensions on image + CSS height
No dimensions on image + CSS width set to 10%
No dimensions on image + CSS width set to 5x the scale + max-height set to 2x scale
No dimensions on image + Container set to twice less width and height than the image + image's CSS max-width and max-height set to 100%. Second example shows the same setup except the container's width is set to twice larger size than the image and the last example shows the original setup except container's height is set to twice larger than the image. Lastly, the fourth example shows the same setup except the container's width and height are set to 2 times larger than the image's original dimensions.
No dimensions on image + image's CSS max-width and max-height set to 100% as well as width is set to 100% + container's width and height are set to 4 times and 2 times (respectively) larger than the image's original dimensions.
No dimensions on image + image's display is set to `table-row` and width set to 100% + container's width and height are set to 4 times and 2 times (respectively) larger than the image's original dimensions and `display` is set to `table`.
For comparison, the second example shows the same setup except the container and the image's displays are set to `block` and container height was changed to min-height and the value is 6 times larger than the image's height