object-fit: снимка в рамка без разтягане

Полезно е да знаеш

Когато снимката и нейната рамка имат различни пропорции, object-fit определя как съдържанието се побира в зададените размери. При contain се запазва цялото изображение, но може да остане празно пространство. При cover рамката се запълва, като част от изображението може да бъде изрязана. И двете стойности запазват пропорциите. [1]

За карта с размери 320 на 180 пиксела примерът е img { width: 320px; height: 180px; object-fit: cover; }. Снимката няма да бъде сплескана, но лице близо до края може да излезе извън видимата част. Това е пример за оформление, а не обещание за подходящ кадър при всяка снимка.

За техническа схема или снимка на документ contain обикновено е по-подходящ избор: изрязаното съдържание може да носи информация. Свойството управлява съдържанието на елемента; размерите на самата рамка се задават отделно.