object-view-box

Свойство object-view-box задаёт, какая часть изображения должна быть видна.

        
          
          .cropped-element {  object-view-box: inset(20%);}
          .cropped-element {
  object-view-box: inset(20%);
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Возможные значения object-view-box:

• none — значение по умолчанию, окно отображения не задаётся;
• <basic-shape-rect> – окно отображения задаётся в виде прямоугольника с помощью функций inset(), xywh().

Зададим область отображения через inset():

        
          
          .object-view-box-inset {  object-fit: cover;  object-view-box: inset(15% 15% 15% 15%);}
          .object-view-box-inset {
  object-fit: cover;
  object-view-box: inset(15% 15% 15% 15%);
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

А теперь через функцию xywh():

        
          
          .object-view-box-xywh {  object-fit: cover;  object-view-box: xywh(10% 10% 75% 75%);}
          .object-view-box-xywh {
  object-fit: cover;
  object-view-box: xywh(10% 10% 75% 75%);
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

По своему поведению свойство object-view-box похоже на атрибут viewBox в SVG. Оно устанавливает размеры окна отображения в замещаемых элементах, вроде <img>, <video>, <canvas>. Контент, попавший в заданную область, будет виден, а остальной скроется.

Область отображения, заданную через object-view-box, браузер воспринимает в качестве исходного элемента, и свойства вроде object-fit и object-position применяются именно к ней. За счёт этого можно реализовать кадрирование изображения без изменения самого файла.

Кроме object-view-box есть и другие способы обрезки, например, overflow: hidden и clip-path. Вот в чём разница: object-view-box работает с содержимым ресурса и задаёт «кадр» внутри источника — как будто кадрируем исходный файл. А overflow: hidden и clip-path задают форму или рамку снаружи, при этом весь ресурс остаётся внутри элемента, даже если часть его не видна.

Посмотрите на разницу в примере:

💡 Замещаемый элемент — это HTML-элемент, отображающий внешний ресурс, например, картинку или видео. Браузер берёт содержимое не из HTML-разметки, а подставляет готовое «встроенное» представление. В CSS мы можем менять размер и расположение такого элемента, но не управлять его внутренним содержимым.