Сочетание соответствия объекта: содержит и жестко запрограммированное соотношение сторон в img

// Javascript for example resizing panels only.

const leftPanel = document.querySelector('.left-panel');
const rightPanel = document.querySelector('.right-panel');
const panelHandle = document.querySelector('.panel-handle');

let isDragging = false;

panelHandle.addEventListener('mousedown', (e) => {
    isDragging = true;
    document.addEventListener('mousemove', onMouseMove);
    document.addEventListener('mouseup', onMouseUp);
});

function onMouseMove(e) {
    if (!isDragging) return;

    const containerWidth = document.body.clientWidth;
    const newLeftWidth = e.clientX;

    if (newLeftWidth < 0 || newLeftWidth > containerWidth - panelHandle.offsetWidth) return;

    const newRightWidth = containerWidth - newLeftWidth - panelHandle.offsetWidth;

    leftPanel.style.width = `${newLeftWidth}px`;
    rightPanel.style.width = `${newRightWidth}px`;
}

function onMouseUp() {
    isDragging = false;
    document.removeEventListener('mousemove', onMouseMove);
    document.removeEventListener('mouseup', onMouseUp);
}

/* img scaling */

.left-panel-img{
    aspect-ratio: 1.5;
    max-height:100%;
    max-width:100%;
    margin:auto;
    outline:solid 1px yellow;
}

img {
  width:100%;
  height:100%;
  object-fit: contain;
}

/* panel resizing */

body {
  display: flex;
  height: 100vh;
  margin: 0;
  overflow: hidden;
  user-select: none;
}

.left-panel,
.right-panel {
  height: 100%;
}

.left-panel {
  background-color: lightblue;
  width: 50%;
  display:flex;
  flex-direction:column;
}

.right-panel {
  background-color: lightcoral;
  flex-grow: 1;
  text-align: center;
}

.panel-handle {
  width: 10px;
  background-color: gray;
  cursor: ew-resize;
}

<div class = "left-panel">
  <div class = "left-panel-img">
    <img src = "https://picsum.photos/400" draggable = "false" />
  </div>
</div>
<div class = "panel-handle">
</div>
<div class = "right-panel">
  <div>
    Drag the center bar to resize these panels.
  </div>
  <div>
    The image should be a 3:2 aspect ratio but is it's instrinsic square.
  </div>
</div>

// Javascript for example resizing panels only.

const leftPanel = document.querySelector('.left-panel');
const rightPanel = document.querySelector('.right-panel');
const panelHandle = document.querySelector('.panel-handle');

let isDragging = false;

panelHandle.addEventListener('mousedown', (e) => {
  isDragging = true;
  document.addEventListener('mousemove', onMouseMove);
  document.addEventListener('mouseup', onMouseUp);
});

function onMouseMove(e) {
  if (!isDragging) return;

  const containerWidth = document.body.clientWidth;
  const newLeftWidth = e.clientX;

  if (newLeftWidth < 0 || newLeftWidth > containerWidth - panelHandle.offsetWidth) return;

  const newRightWidth = containerWidth - newLeftWidth - panelHandle.offsetWidth;

  leftPanel.style.width = `${newLeftWidth}px`;
  rightPanel.style.width = `${newRightWidth}px`;
}

function onMouseUp() {
  isDragging = false;
  document.removeEventListener('mousemove', onMouseMove);
  document.removeEventListener('mouseup', onMouseUp);
}

/* img scaling */

.left-panel {
  position: relative;
}

.left-panel-img-wrapper {
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 1.5;
}

img {
  width: 100%;
  height: 100%;
  display: block;
}

/* panel resizing */

body {
  display: flex;
  height: 100vh;
  margin: 0;
  overflow: hidden;
  user-select: none;
}

.left-panel,
.right-panel {
  height: 100%;
}

.left-panel {
  background-color: lightblue;
  width: 50%;
}

.right-panel {
  background-color: lightcoral;
  flex-grow: 1;
  text-align: center;
}

.panel-handle {
  width: 10px;
  background-color: gray;
  cursor: ew-resize;
}

<div class = "left-panel">
  <div class = "left-panel-img-wrapper">
    <img class = "left-panel-img" src = "data:image/bmp;base64,Qk2mAAAAAAAAAD4AAAAoAAAADQAAAA0AAAABAAQAAAAAAAAAAADEDgAAxA4AAAIAAAACAAAAAAAA//////8AAAAAAAAAAAERAREBEQAAAREBEQERAAABEQERAREAAAAAAAAAAAAAAREBEQERAAABEQERAREAAAERAREBEQAAAAAAAAAAAAABEQERAREAAAERAREBEQAAAREBEQERAAAAAAAAAAAAAA= = " draggable = "false" />
  </div>
</div>
<div class = "panel-handle">
</div>
<div class = "right-panel">
  <div>
    Drag the center bar to resize these panels.
  </div>
  <div>The image to the left should be 3:2 and centered in its panel vertically and horizontally.</div>
</div>