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

We had a huge conversation about cover vs contain just want to share this thoughts:

1. landscape image on landscape screen - best to use cover

2. portrait image on landscape screen - best to use contain

3. portrait image on landscape screen - best to use contain

4. portrait image on landscape screen - best to use contain

Illustration:

if(iDonPutSomeCode) const result = iCantPasteLinkToCodePen

https://codepen.io/Kinosura/pen/EGZbdy?editors=1100