Difference between background-size:cover and background-size:contain

Question

Visually I can appreciate the difference, but in which situations should I prefer one over the other? Is there any point using them at all or can they be replaced by percent

Answer 1

background-size:cover will cover the entire div with the image. This could be useful for showing thumbnail images of a main image where the entire image being displayed isn't that important, but you still want to conform to a size for all images. (for example, a blog post excerpt)

background-size:contain will show the entire image within the div. This can be useful if you specifically want to display the entirety of the images, but within a set container div size. (For example, a collection of company logos)

Both keep the image at the same aspect ratio

http://cdn.onextrapixel.com/wp-content/uploads/2012/02/cover-contain.jpg