В чём разница между значениями fill, contain и cover свойства object-fit?

Разница между значениями fill, contain и cover свойства object-fit заключается в том, как изображение подстраивается под заданные размеры: doka.guide htmlacademy.ru

1. Fill — значение по умолчанию, картинка полностью вписывается в указанные размеры без соблюдения собственных пропорций. doka.guide Задача fill — растянуть картинку до размеров её бокса. htmlacademy.ru Из-за этого могут получаться сплющенные картинки. htmlacademy.ru
2. Contain — картинка подстроится под заданные размеры так, чтобы поместиться внутри целиком без нарушения пропорций. doka.guide При этом изображение может иметь пустые области по бокам, сверху или снизу. htmlacademy.ru Задача contain — сохранить пропорции оригинальной картинки, бокс заполнять не обязательно. htmlacademy.ru
3. Cover — картинка без нарушения пропорций заполнит всю доступную область, обрезая всё ненужное. doka.guide Изображение масштабируется таким образом, что меньшая сторона изображения полностью помещается в поле содержимого. www.dev-notes.ru Любая часть изображения, которая выходит за пределы поля, затем обрезается. www.dev-notes.ru