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

Разница между значениями cover и contain свойства object-fit заключается в следующем:

1. cover — изображение масштабируется таким образом, чтобы полностью заполнить родительский элемент. htmlacademy.ru Пропорции сохранятся, но всё, что не поместится в размер бокса, обрежется. htmlacademy.ru
2. contain — изображение пропорционально масштабируется, чтобы целиком поместиться внутри родительского элемента. htmlacademy.ru При этом изображение может иметь пустые области по бокам, сверху или снизу. htmlacademy.ru Задача contain — сохранить пропорции оригинальной картинки, бокс заполнять не обязательно. htmlacademy.ru

Таким образом, cover подходит для ситуаций, когда важно, чтобы изображение занимало всё доступное пространство, сохраняя пропорции, а contain — когда нужно, чтобы изображение поместилось внутри родительского элемента, при этом важно сохранить его пропорции. htmlacademy.ru www.8host.com

Пользователь

Время добавления