Обновить

Я обновил ответ, но я не уверен, что вы хотите, вы просто сказали, чего не хотели. Поэтому я предполагаю, что вы хотите:

• Поддерживать соотношение сторон
• Избегать обрезки
• Нет черных полос, только край изображения к краю

Мы знаем, что это широкоформатный плакат с соотношением сторон 16: 9, поэтому, если вы хотите ширину 270 пикселей, сделайте следующее:

Разделите ширину на 16

270/16 = 16.875

Возьмите этот фактор и умножьте его на 9

16.875 * 9 = 151.875

Раунд вверх или вниз

Round up to 152px

Измените высоту с результатом, затем примените object-fit:cover

152px is the height of an image that's 270px wide and has an aspect ratio of 16:9.

Просмотрите Fiddle и обновленный сниппл

Изменить

Чтобы отразить обновление и лучшее понимание OP, этот фрагмент редактируется.

object-fit - это простое свойство CSS. См. Статью . Ниже приведен фрагмент ниже. Btw, единственный код, который вам нужен из этого фрагмента, - object-fit: cover, остальные стили и разметка предназначены только для презентации.

Snippet

/* We know this is a widescreen poster with the aspect ratio of 16:9, so if you want a width of 270px, do the following:

    270/16 = 16.875
    16.875 * 9 = 151.875
    Round up to 152px
    
152px is the height of an image that's 270px wide and has an aspect ratio of 16:9 */

.bg1 {
  width: 270px;
  height: 152px;
  object-fit: cover;
  outline: 2px dashed blue;
}
.bg2 {
  width: 270px;
  height: 152px;
  object-fit: contain;
  outline: 2px dashed blue;
}
.bg3 {
  width: 270px;
  height: 152px;
  outline: 2px dashed blue;
}
aside {
  height: 100%;
  width: 40%;
  display: inline-block;
  position: absolute;
  right: 0;
  top: 0;
}
figure {
  height: 180px;
  width: 270px;
  max-width: 50%;
}
.pointer {
  position: absolute;
}
.pointer b {
  font-size: 32px;
}
#a.pointer {
  top: 43%;
  left: 52%;
}
#b.pointer {
  bottom: 5%;
  left: 52%;
}
.box {
  width: 600px;
  height: 450px;
  position: relative;
}
.spacer {
  position: relative;
  padding: .1% 0;
  width: 2px;
}
code {
  font-family: Consolas;
  color: red;
}