Как лучше всего кадрировать background-image?

Теперь когда требования более менее ясны можно что то советовать:

Пользователь хочет поставить фон. Он Грузит изображение 1600x1200. Я его сразу преобразуются под мою область видения, это 1184x890(если правильно помню). Область отображаемого фона на странице 1184x300. При том что пользователь может захотеть сдвинуть вертикально изображение на любой отступить в пределах этих 890px. Так что по факту фон отображаемый на странице должен иметь смещение, которое указал пользовать.

Если Вы не хотите заниматься "оптимизацией на спичках" и ресурс хранилища для загружаемых картинок не сильно дорогой, то я бы посоветовал не обрезать картинки вовсе. Просто сохранять данные о картинке и её настройках. Для этого можно использовать какую-то библиотеку с drag-n-drop и другими фишками, и из неё получать данные в виде:

{
  "src": "https://source.unsplash.com/random/1600x1200",
  "top": 352,
  "left": -520
}

Сохранять данные где-то в БД и потом рендерить, там где нужно следующим образом:

const getImage = () => { 
  return { 
    "src": "https://source.unsplash.com/random/1600x1200", 
    "top": -321, 
    "left": -100 
  } 
}; 
 
const setImageAsBg = (element, imgConfig) => { 
  if (element && imgConfig) { 
    const { src, top, left } = imgConfig; 
    element.style.backgroundImage = `url(${src})`; 
    element.style.backgroundPosition = `${left}px ${top}px`; 
  } else { 
    console.warn("Haven't 'element' or 'imgConfig' argument"); 
  } 
}; 
 
const bannerEl = document.getElementsByClassName("image-container")[0]; 
const imageData = getImage(); 
 
setImageAsBg(bannerEl, imageData);

.image-container { 
  background-color: red; 
  background-repeat: no-repeat; 
  background-size: 100% auto; 
  width: 1800px; 
  height: 350px; 
} 
 
.full-image-container { 
  margin: 3em 0; 
}

<div class="image-container"></div> 
<div class="full-image-container"> 
  <img src="https://source.unsplash.com/random/1600x1200" alt="full size"> 
</div>

Посмотрите на свойство CSS background-size: cover или contain если вы это имеете виду.
@Дмитрий Мирошниченко

background-size: cover - Масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока.

Пример:

.cover { 
  display: inline-block; 
  background: url('https://images.pexels.com/photos/8633/nature-tree-green-pine.jpg') no-repeat center center / cover; 
} 
 
.cover.vert { 
  width: 100px; 
  height: 200px; 
} 
 
.cover.hori { 
  width: 200px; 
  height: 100px; 
}

<div class="cover vert"></div> 
<div class="cover hori"></div>

background-size: contain - Масштабирует изображение с сохранением пропорций таким образом, чтобы картинка целиком поместилась внутрь блока.

Пример:

.contain { 
  display: inline-block; 
  background: red url('https://images.pexels.com/photos/8633/nature-tree-green-pine.jpg') no-repeat center center / contain; 
} 
 
.contain.vert { 
  width: 100px; 
  height: 200px; 
} 
 
.contain.hori { 
  width: 200px; 
  height: 100px; 
}

<div class="contain vert"></div> 
<div class="contain hori"></div>

Источник